/* ─────────────────────────────────────────────────────────────
   Steps — design tokens (from the Steps design system)
   Two coordinated themes:
   • Linen Ivory — warm cream surface, deep-forest ink, olive accent.
   • Nightfall  — photo-glass over near-black navy; amber highlight.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ==== Linen Ivory ==== */
  --linen-bg:            #ECE9E3;
  --forest:              #2C3326;
  --forest-95:           rgba(44, 51, 38, 0.95);
  --forest-85:           rgba(44, 51, 38, 0.85);
  --forest-80:           rgba(44, 51, 38, 0.80);
  --forest-75:           rgba(44, 51, 38, 0.75);
  --forest-72:           rgba(44, 51, 38, 0.72);
  --forest-70:           rgba(44, 51, 38, 0.70);
  --forest-60:           rgba(44, 51, 38, 0.60);
  --forest-55:           rgba(44, 51, 38, 0.55);
  --forest-50:           rgba(44, 51, 38, 0.50);
  --forest-45:           rgba(44, 51, 38, 0.45);
  --forest-35:           rgba(44, 51, 38, 0.35);
  --forest-30:           rgba(44, 51, 38, 0.30);
  --forest-25:           rgba(44, 51, 38, 0.25);
  --forest-22:           rgba(44, 51, 38, 0.22);
  --forest-18:           rgba(44, 51, 38, 0.18);
  --forest-16:           rgba(44, 51, 38, 0.16);
  --forest-12:           rgba(44, 51, 38, 0.12);
  --forest-10:           rgba(44, 51, 38, 0.10);
  --forest-06:           rgba(44, 51, 38, 0.06);
  --olive:               #6C705B;
  --taupe:               #C5BEB1;
  --sand:                #D9C8AA;
  --clay:                #9C4A3E;

  /* Linen glass (frosted white on cream) */
  --linen-glass-fill:          rgba(255, 255, 255, 0.50);
  --linen-glass-fill-strong:   rgba(255, 255, 255, 0.78);
  --linen-glass-border:        rgba(44, 51, 38, 0.18);
  --linen-glass-border-strong: rgba(44, 51, 38, 0.40);
  --linen-glass-accent-fill:   rgba(108, 112, 91, 0.14);
  --linen-glass-accent-border: rgba(108, 112, 91, 0.55);

  /* ==== Nightfall ==== */
  --night-base:          #0A0F19;
  --amber:               #FFB45A;
  --amber-glass-fill:    rgba(255, 180, 90, 0.14);
  --amber-glass-border:  rgba(255, 180, 90, 0.55);

  --night-glass-fill:        rgba(255, 255, 255, 0.08);
  --night-glass-border:      rgba(255, 255, 255, 0.18);
  --night-chrome-fill:       rgba(255, 255, 255, 0.10);
  --night-chrome-border:     rgba(255, 255, 255, 0.28);
  --night-chrome-active:     rgba(255, 255, 255, 0.18);

  --white:               #FFFFFF;
  --white-95:            rgba(255, 255, 255, 0.95);
  --white-85:            rgba(255, 255, 255, 0.85);
  --white-82:            rgba(255, 255, 255, 0.82);
  --white-78:            rgba(255, 255, 255, 0.78);
  --white-72:            rgba(255, 255, 255, 0.72);
  --white-70:            rgba(255, 255, 255, 0.70);
  --white-68:            rgba(255, 255, 255, 0.68);
  --white-60:            rgba(255, 255, 255, 0.60);
  --white-55:            rgba(255, 255, 255, 0.55);
  --white-30:            rgba(255, 255, 255, 0.30);

  /* Rank medals — photo (bright) and Linen (deep) sets */
  --rank-gold:           #FFD27A;
  --rank-silver:         #E8E8E8;
  --rank-bronze:         #E0A877;
  --rank-gold-deep:      #D4A843;
  --rank-silver-deep:    #B0B8C8;
  --rank-bronze-deep:    #CD8B5A;

  /* Rank-delta arrows on League boards */
  --arrow-up:            #6C705B;
  --arrow-down:          #9C4A3E;

  /* Semantic aliases */
  --surface:             var(--linen-bg);
  --text-strong:         var(--forest);
  --text-body:           var(--forest-70);
  --text-muted:          var(--forest-55);
  --accent:              var(--olive);
  --divider:             var(--forest-10);
  --cta-bg:              var(--forest);
  --cta-fg:              var(--linen-bg);

  /* ==== Type ==== */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-icon: "Material Symbols Outlined";
  --tabular: "tnum" 1;

  /* ==== Spacing / control heights ==== */
  --h-field:   48px;
  --h-cta:     56px;
  --h-nav:     62px;
  --h-nav-tab: 52px;
  --h-rank:    44px;
  --h-board:   42px;

  /* ==== Radii ==== */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-card: 28px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* ==== Effects ==== */
  --blur-md:  14px;
  --blur-lg:  18px;
  --shadow-glass:   0 2px 8px rgba(44, 51, 38, 0.06);
  --shadow-cta:     0 8px 24px rgba(44, 51, 38, 0.22);
  --shadow-night:   0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.35);
  --glow-progress:  0 0 12px rgba(255, 255, 255, 0.45);

  --ease-out:   cubic-bezier(0.33, 0, 0.2, 1);
  --ease-reveal: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast:   200ms;
  --dur-photo:  600ms;
}