/* ============================================================
   GoPlay India — Neo-Arcade Editorial
   tokens.css — palettes, type scale, spacing, easing, z-index
   ============================================================ */

:root {
  /* ── Raw palette ── */
  --paper:      #F4EFE6;
  --paper-2:    #EAE2D4;
  --paper-3:    #FCF8F0;
  --ink:        #16130F;
  --ink-2:      #1E1A16;
  --ink-soft:   #4A423A;
  --vermilion:  #E8452C;
  --saffron:    #F2A413;
  --jade:       #1F7A5C;
  --violet:     #4B3BD9;

  /* ── Semantic surface / text (light is the base) ── */
  --bg:          var(--paper);
  --bg-alt:      var(--paper-2);
  --surface:     var(--paper-3);
  --surface-2:   var(--paper-2);
  --fg:          var(--ink);
  --fg-soft:     var(--ink-soft);
  --line:        var(--ink);
  --line-soft:   rgba(22, 19, 15, 0.22);
  --shadow-col:  var(--ink);

  /* ── Semantic accents (never redefined only inside a query) ── */
  /* Inverted surface: bars that read as a solid ink block on the page.
     Stays dark in both themes so accents on it keep their contrast. */
  --inv-bg:     var(--ink);
  --inv-fg:     var(--paper);
  --inv-accent: var(--saffron);

  --accent:        var(--vermilion);
  --accent-on:     var(--ink);          /* text that sits on --accent */
  --accent-2:      var(--saffron);
  --accent-2-on:   var(--ink);
  --money:         var(--jade);
  --link:          var(--violet);
  --focus:         var(--violet);

  /* ── Type stacks ── */
  --font-display: "Archivo Black", "Helvetica Neue", Impact, "Arial Black", sans-serif;
  --font-body:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ── Fluid type scale ── */
  --t-xs:   0.78rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;                             /* 17px */
  --t-md:   clamp(1.06rem, 0.4vw + 0.98rem, 1.19rem);
  --t-lg:   clamp(1.19rem, 0.7vw + 1.05rem, 1.45rem);
  --t-h3:   clamp(1.25rem, 1vw + 1.05rem, 1.65rem);
  --t-h2:   clamp(1.75rem, 3vw + 1rem, 3rem);
  --t-h1:   clamp(2.4rem, 6vw, 4.6rem);
  --t-mega: clamp(4rem, 18vw, 12rem);

  --lh-tight: 1.06;
  --lh-snug:  1.28;
  --lh-body:  1.65;
  --measure:  68ch;

  /* ── Spacing scale ── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --gutter:  clamp(16px, 4vw, 40px);
  --band:    clamp(48px, 7vw, 96px);
  --container: 1200px;

  /* ── Edges ── */
  --bw:        2px;                       /* standard border */
  --bw-thick:  3px;
  --r-0:       0px;
  --r-1:       4px;
  --r-pill:    999px;
  --offset:    6px;                       /* hard shadow offset */
  --offset-sm: 3px;
  --hard:      var(--offset) var(--offset) 0 var(--shadow-col);
  --hard-sm:   var(--offset-sm) var(--offset-sm) 0 var(--shadow-col);
  --hard-accent: var(--offset) var(--offset) 0 var(--accent);

  /* ── Motion ── */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-in:   cubic-bezier(.55, 0, 1, .45);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast:    150ms;
  --d-base:    240ms;
  --d-slow:    400ms;
  --d-ambient: 900ms;
  /* reusable transition bundles */
  --tr-press: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
  --tr-lift:  transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
  --tr-tint:  background-color var(--d-fast) linear, color var(--d-fast) linear;

  /* ── z-index ladder ── */
  --z-ambient:   0;
  --z-raised:    1;
  --z-sticky:    20;
  --z-nav:       60;
  --z-drawer:    95;
  --z-bar:       80;
  --z-toast:     90;
  --z-modal:    100;
  --z-progress: 110;
}

/* ── Dark mode: system preference (unless explicitly set to light) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #16130F;
    --bg-alt:     #1E1A16;
    --surface:    #211D18;
    --surface-2:  #2A251F;
    --fg:         #F4EFE6;
    --fg-soft:    #C4B9AA;
    --line:       #F4EFE6;
    --line-soft:  rgba(244, 239, 230, 0.24);
    --shadow-col: #7A6F5F;

    --inv-bg:     #2A251F;
    --inv-fg:     #F4EFE6;
    --inv-accent: #FFC24D;

    --accent:      #FF6A4F;
    --accent-on:   #16130F;
    --accent-2:    #FFC24D;
    --accent-2-on: #16130F;
    --money:       #3FCF9A;
    --link:        #A99BFF;
    --focus:       #A99BFF;
  }
}

/* ── Dark mode: explicit override ── */
:root[data-theme="dark"] {
  --bg:         #16130F;
  --bg-alt:     #1E1A16;
  --surface:    #211D18;
  --surface-2:  #2A251F;
  --fg:         #F4EFE6;
  --fg-soft:    #C4B9AA;
  --line:       #F4EFE6;
  --line-soft:  rgba(244, 239, 230, 0.24);
  --shadow-col: #7A6F5F;

  --inv-bg:     #2A251F;
  --inv-fg:     #F4EFE6;
  --inv-accent: #FFC24D;

  --accent:      #FF6A4F;
  --accent-on:   #16130F;
  --accent-2:    #FFC24D;
  --accent-2-on: #16130F;
  --money:       #3FCF9A;
  --link:        #A99BFF;
  --focus:       #A99BFF;
}