/* ===
   Yono Game — "High Table"
   tokens.css · palette, type scale, space, radius, easing, z-index ladder
   Dark-ground-first. Every colour is declared on :root, then re-declared in
   both the prefers-color-scheme light block and the [data-theme] blocks, so
   no token is ever defined only inside a media query.
   === */

/* --- TABLE ---
   Default ground: deep baize felt, ivory card stock, gold chips.
   --- */
:root {
  /* Felt + rail */
  --baize:        #123A2C;
  --baize-deep:   #0C2A20;
  --baize-lit:    #1A4C39;
  --rail:         #4A2C1A;
  --rail-lit:     #6B4126;

  /* Card stock */
  --bone:         #F6F2E7;
  --bone-2:       #EAE4D5;
  --bone-edge:    #D6CEBA;

  /* Ink — on card stock only */
  --ink:          #1A1A18;
  --ink-soft:     #4E4C46;
  --ink-dim:      #7A776E;

  /* Accents */
  --pip-red:      #C42B2B;
  --chip-gold:    #C9A227;
  --chip-gold-hi: #E8C55A;
  --chip-teal:    #1F7A6B;
  --jade:         #2E8B57;

  /* Text that sits directly on felt. Paired to the ground, not to the
     card stock — in light mode the felt is pale, so this flips to ink. */
  --on-felt:      #F6F2E7;
  --on-felt-soft: rgba(246, 242, 231, .74);
  --on-felt-dim:  rgba(246, 242, 231, .56);
  --felt-hair:    rgba(246, 242, 231, .16);

  /* Chip readout disc — dark inset that numerals sit on */
  --readout-bg:   #0A241B;
  --readout-edge: rgba(201, 162, 39, .42);

  /* Focus ring — teal, never gold, so focus is never read as a chip */
  --focus:        #1F7A6B;

  /* --- DERIVED --- */

  /* Fine woven grain. Laid over the baize ground only — never card stock. */
  --felt:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.014) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05)        0 2px, transparent 2px 4px);

  /* Card-on-table depth: one soft, tight, warm-dark drop. No glow, no bevel. */
  --card-shadow:    0 1px 0 var(--bone-edge), 0 16px 30px -18px rgba(0,0,0,.7);
  --card-shadow-lift: 0 1px 0 var(--bone-edge), 0 26px 44px -20px rgba(0,0,0,.78);

  /* Dashed chip rim, repeated around the edge of a gold chip. */
  --chip-rim: conic-gradient(
    var(--chip-gold) 0 12.5%, var(--bone) 0 25%,
    var(--chip-gold) 0 37.5%, var(--bone) 0 50%,
    var(--chip-gold) 0 62.5%, var(--bone) 0 75%,
    var(--chip-gold) 0 87.5%, var(--bone) 0 100%);

  /* --- TYPE --- */
  --f-display: "Bricolage Grotesque", "Familjen Grotesk", ui-sans-serif, system-ui,
               -apple-system, "Segoe UI", sans-serif;
  --f-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Noto Sans Devanagari", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-h1:   clamp(2.4rem, 5.8vw, 4.4rem);
  --t-h2:   clamp(1.7rem, 3.2vw, 2.6rem);
  --t-h3:   clamp(1.32rem, 2.1vw, 1.72rem);
  --t-h4:   clamp(1.1rem, 1.5vw, 1.28rem);
  --t-body: 1.0625rem;          /* 17px */
  --t-sm:   .9375rem;
  --t-xs:   .8125rem;
  --t-kick: .75rem;             /* uppercase mono kicker */

  --lh-tight: 1.06;
  --lh-head:  1.16;
  --lh-body:  1.65;
  --tr-tight: -.015em;
  --tr-kick:  .14em;

  --measure: 68ch;

  /* --- SPACE --- */
  --wrap:   1200px;
  --gutter: clamp(18px, 4vw, 40px);
  --sec-y:  clamp(64px, 8.5vw, 124px);
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 22px; --s-6: 30px;  --s-7: 40px; --s-8: 56px;
  --s-9: 76px;

  /* --- RADIUS --- */
  --r-card:  12px;   /* playing cards have modest corners — never more */
  --r-input: 10px;
  --r-pill:  999px;

  /* --- MOTION --- */
  --e-deal:  cubic-bezier(.2,.9,.25,1);   /* card landing on the table */
  --e-out:   cubic-bezier(.33,1,.68,1);
  --e-in:    cubic-bezier(.5,0,.75,0);
  --d-fast:  150ms;
  --d-ui:    260ms;
  --d-deal:  520ms;
  --d-panel: 340ms;

  /* --- Z-INDEX --- */
  --z-ambient:  0;
  --z-base:     1;
  --z-rail:     5;
  --z-sticky:  20;
  --z-nav:     60;
  --z-drawer:  70;
  --z-toast:   80;
  --z-modal:   90;
  --z-loader: 100;
  --z-progress: 110;
}

/* --- DAY TABLE ---
   Light mode. Felt lightens, rail warms, card stock stays near-white, ink is
   unchanged, and gold/red deepen so both still hold on the paler ground.
   Text on felt flips from bone to ink — a pale felt cannot carry bone text.
   --- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --baize:        #DDE9E2;
    --baize-deep:   #CDDDD4;
    --baize-lit:    #EAF2ED;
    --rail:         #B08A63;
    --rail-lit:     #C9A47C;

    --bone:         #FFFDF7;
    --bone-2:       #F4F0E4;
    --bone-edge:    #E0D9C7;

    --ink:          #1A1A18;
    --ink-soft:     #4E4C46;
    --ink-dim:      #6E6B62;

    --pip-red:      #A81F1F;
    --chip-gold:    #A8842B;
    --chip-gold-hi: #C9A227;
    --chip-teal:    #1A6558;
    --jade:         #24704A;

    --on-felt:      #14322A;
    --on-felt-soft: rgba(20, 50, 42, .78);
    --on-felt-dim:  rgba(20, 50, 42, .60);
    --felt-hair:    rgba(20, 50, 42, .18);

    --readout-bg:   #14322A;
    --readout-edge: rgba(168, 132, 43, .48);

    --focus:        #1A6558;

    --felt:
      repeating-linear-gradient(45deg,  rgba(255,255,255,.30) 0 2px, transparent 2px 4px),
      repeating-linear-gradient(-45deg, rgba(0,0,0,.022)      0 2px, transparent 2px 4px);

    --card-shadow:      0 1px 0 var(--bone-edge), 0 14px 26px -18px rgba(24,48,40,.42);
    --card-shadow-lift: 0 1px 0 var(--bone-edge), 0 24px 40px -20px rgba(24,48,40,.50);
  }
}

/* Explicit light override — wins regardless of system setting. */
[data-theme="light"] {
  --baize:        #DDE9E2;
  --baize-deep:   #CDDDD4;
  --baize-lit:    #EAF2ED;
  --rail:         #B08A63;
  --rail-lit:     #C9A47C;

  --bone:         #FFFDF7;
  --bone-2:       #F4F0E4;
  --bone-edge:    #E0D9C7;

  --ink:          #1A1A18;
  --ink-soft:     #4E4C46;
  --ink-dim:      #6E6B62;

  --pip-red:      #A81F1F;
  --chip-gold:    #A8842B;
  --chip-gold-hi: #C9A227;
  --chip-teal:    #1A6558;
  --jade:         #24704A;

  --on-felt:      #14322A;
  --on-felt-soft: rgba(20, 50, 42, .78);
  --on-felt-dim:  rgba(20, 50, 42, .60);
  --felt-hair:    rgba(20, 50, 42, .18);

  --readout-bg:   #14322A;
  --readout-edge: rgba(168, 132, 43, .48);

  --focus:        #1A6558;

  --felt:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.30) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.022)      0 2px, transparent 2px 4px);

  --card-shadow:      0 1px 0 var(--bone-edge), 0 14px 26px -18px rgba(24,48,40,.42);
  --card-shadow-lift: 0 1px 0 var(--bone-edge), 0 24px 40px -20px rgba(24,48,40,.50);
}

/* Explicit dark override — so the toggle wins in both directions. */
[data-theme="dark"] {
  --baize:        #123A2C;
  --baize-deep:   #0C2A20;
  --baize-lit:    #1A4C39;
  --rail:         #4A2C1A;
  --rail-lit:     #6B4126;

  --bone:         #F6F2E7;
  --bone-2:       #EAE4D5;
  --bone-edge:    #D6CEBA;

  --ink:          #1A1A18;
  --ink-soft:     #4E4C46;
  --ink-dim:      #7A776E;

  --pip-red:      #C42B2B;
  --chip-gold:    #C9A227;
  --chip-gold-hi: #E8C55A;
  --chip-teal:    #1F7A6B;
  --jade:         #2E8B57;

  --on-felt:      #F6F2E7;
  --on-felt-soft: rgba(246, 242, 231, .74);
  --on-felt-dim:  rgba(246, 242, 231, .56);
  --felt-hair:    rgba(246, 242, 231, .16);

  --readout-bg:   #0A241B;
  --readout-edge: rgba(201, 162, 39, .42);

  --focus:        #1F7A6B;

  --felt:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.014) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05)        0 2px, transparent 2px 4px);

  --card-shadow:      0 1px 0 var(--bone-edge), 0 16px 30px -18px rgba(0,0,0,.7);
  --card-shadow-lift: 0 1px 0 var(--bone-edge), 0 26px 44px -20px rgba(0,0,0,.78);
}