/* ==========================================================================
   RanKnight — Design Tokens (single source of truth)
   Brand: knight/heraldic, modern. Dark-dominant "results-data" aesthetic.
   Palette from the supplied Spartan-helmet logo: black + gold + steel.
   ========================================================================== */

:root {
  /* ---- Brand palette (raw) ---- */
  --gold:        #F2A900;   /* champion accent — from logo plume */
  --gold-600:    #D2930A;   /* hover/darker */
  --gold-200:    #FBE3A4;   /* tint */
  --gold-050:    #FFF7E6;   /* faint wash */
  --steel:       #9A9AA0;   /* secondary metallic */
  --ink:         #0B0B0C;   /* near-black base */
  --ink-800:     #131316;   /* dark surface alt */
  --ink-700:     #1C1C21;   /* card on dark */
  --ink-600:     #2A2A30;   /* border on dark */
  --white:       #FFFFFF;
  --paper:       #F6F5F3;   /* warm off-white light surface */
  --paper-alt:   #EDEBE7;

  /* ---- Rank / map status (tuned to sit with gold, not stock tailwind) ---- */
  --rank-top:    #27C06B;   /* top-3 / green */
  --rank-mid:    #F2A900;   /* mid (reuses gold) */
  --rank-low:    #E5544B;   /* poor / red */
  --color-success: #27C06B;
  --color-error:   #E5544B;

  /* ---- Semantic tokens — DARK is the default theme (site is dark-dominant) ---- */
  --color-text:        #F5F5F4;
  --color-text-muted:  #A6A6AE;
  --color-heading:     #FFFFFF;
  --color-surface:     #0B0B0C;
  --color-surface-alt: #131316;
  --color-card:        #1C1C21;
  --color-border:      #2A2A30;
  --color-accent:      #F2A900;
  --color-accent-hover:#D2930A;
  --color-accent-text: #F2A900;  /* accent color safe for TEXT on the current surface */
  --color-on-accent:   #0B0B0C;

  /* ---- Type scale (modular, ratio 1.25) ---- */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.563rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-3xl:  3.052rem;
  --text-4xl:  3.815rem;
  /* Fluid display sizes for hero / section heads */
  --display-hero: clamp(2.6rem, 6.2vw, 5rem);
  --display-lg:   clamp(2rem, 4.4vw, 3.4rem);
  --display-md:   clamp(1.6rem, 3vw, 2.4rem);

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;

  /* ---- Layout ---- */
  --container:  1200px;
  --container-narrow: 780px;
  --gutter:     var(--space-4);

  /* ---- Radius / shadow / motion ---- */
  --radius:     16px;
  --radius-sm:  10px;
  --radius-pill:999px;
  --shadow:     0 24px 60px -24px rgba(0,0,0,.65);
  --shadow-gold:0 14px 40px -14px rgba(242,169,0,.45);
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --dur:        .2s;
  --dur-slow:   .7s;
}

/* Light-context sections opt in with .section--light (overrides semantics in-subtree) */
.section--light {
  --color-text:        #26262B;
  --color-text-muted:  #57575F;
  --color-heading:     #0B0B0C;
  --color-surface:     var(--paper);
  --color-surface-alt: var(--paper-alt);
  --color-card:        #FFFFFF;
  --color-border:      #E1DFDA;
  --color-accent-text: #8A6200;   /* deep bronze-gold: readable accent text on light (AA) */
}
.section--paper { --color-surface: var(--paper); }