/* =========================================
   VARIABLES — single source of truth for color, radii, shadow, etc.
   See docs/style-guide.html#colors for the canonical palette.
   ========================================= */
:root {
  /* Surfaces & ink scale (warm-neutral palette). */
  --bg:        #f6f5f1;   /* page background */
  --bg-2:      #ecebe5;   /* sunken / hover */
  --surface:   #ffffff;   /* card / modal surfaces */
  --surface-2: #fbfaf7;   /* table-header / subtle off-white */
  --line:      #e6e3da;   /* primary border */
  --line-2:    #f0eee7;   /* internal divider */

  --ink:       #1a1814;   /* primary text */
  --ink-2:     #555049;   /* secondary text */
  --ink-3:     #8a857c;   /* tertiary text / muted */
  --ink-4:     #b6b1a6;   /* placeholder / disabled */

  --gold:      #FFCC00;
  --gold-dark: #E5B701;
  --gold-light:#FFE478;
  --gold-pale: #FFF6CC;

  --silver:       #C7D1D7;
  --silver-dark:  #AFBCC6;
  --silver-light: #D6E9F5;

  --bronze:       #DFA266;
  --bronze-dark:  #C09264;
  --bronze-light: #EDC094;

  /* Tier palette extensions for tiers beyond gold/silver/bronze. */
  --slate:       #6B7280;  --slate-light: #9CA3AF;
  --steel:       #4B6587;  --steel-light: #7C90B0;
  --mauve:       #8E7CC3;  --mauve-light: #B5A8D6;
  --taupe:       #7C6F66;  --taupe-light: #A89B92;

  --success:      #27AE60;
  --success-soft: rgba(39,174,96,0.12);
  --danger:       #EB5757;
  --danger-soft:  rgba(235,87,87,0.12);
  --warning:      #EF9014;
  --warning-soft: rgba(239,144,20,0.12);
  --info:         #3B82F6;
  --info-soft:    rgba(59,130,246,0.12);

  /* Legacy semantic aliases (kept for compatibility). */
  --green: var(--success);
  --red:   var(--danger);
  --amber: var(--warning);

  /* Radii */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-pill: 999px;

  /* Shadows (warm-tinted) */
  --shadow-sm: 0 1px 2px rgba(45,35,20,0.04), 0 2px 6px rgba(45,35,20,0.04);
  --shadow:    0 1px 2px rgba(45,35,20,0.05), 0 6px 18px rgba(45,35,20,0.06);
  --shadow-lg: 0 2px 4px rgba(45,35,20,0.05), 0 14px 32px rgba(45,35,20,0.08);

  /* Layout */
  --navbar-height: 72px;
  --sidebar-w:     240px;
}