/* ==========================================================================
   Third Base — design tokens
   Single source of truth for colour, type, spacing and motion.
   Import this before any other stylesheet. Never hardcode a hex value that
   exists here; if you need a new one, add it here first.
   ========================================================================== */

:root {

  /* ---- felt -------------------------------------------------------------
     Used by the radial gradient on the table bed. The felt is NOT a flat
     fill — these are gradient stops, lightest at the overhead light. */
  --tb-felt-0:  #31946a;   /* hotspot, under the light          */
  --tb-felt-1:  #217452;
  --tb-felt-2:  #13563a;
  --tb-felt-3:  #0b3d29;
  --tb-felt-4:  #05251a;   /* outer edge, into the rail shadow  */
  --tb-felt-ink:#02150d;   /* shadow colour for anything on felt */

  /* ---- wood rail -------------------------------------------------------- */
  --tb-wood-hi: #b4794c;   /* lit top roll        */
  --tb-wood-1:  #8a5230;
  --tb-wood-2:  #5c3320;
  --tb-wood-3:  #291609;   /* deepest             */
  --tb-wood-spec:#e0ab74;  /* specular edge       */
  --tb-wood-lip:#140a04;   /* inner lip shadow    */

  /* ---- gold ------------------------------------------------------------- */
  --tb-gold-hi: #f6e6ae;
  --tb-gold:    #d8b45c;
  --tb-gold-lo: #8a6d18;
  --tb-gold-ink:#eed596;   /* gold used as TEXT on felt */

  /* ---- neutrals / UI ---------------------------------------------------- */
  --tb-cream:   #f4efe2;   /* primary text on dark      */
  --tb-cream-2: #cfc6b2;   /* secondary text            */
  --tb-muted:   #8e9790;   /* labels, keys              */
  --tb-ink:     #14110e;   /* card black                */
  --tb-backdrop:#080a09;   /* page background, outside the frame */

  /* ---- semantic --------------------------------------------------------- */
  --tb-win:     #8ce0a8;
  --tb-lose:    #ff8d8d;
  --tb-red:     #c0272d;   /* card hearts/diamonds      */
  --tb-warn-bg: rgba(28,10,8,.9);
  --tb-warn-br: rgba(214,90,70,.55);

  /* ---- glass surfaces (all UI chrome floats over felt) ------------------- */
  --tb-glass:    rgba(8,14,10,.55);
  --tb-glass-2:  rgba(20,28,22,.86);
  --tb-glass-br: rgba(238,213,150,.24);
  --tb-blur:     blur(8px);

  /* ---- type -------------------------------------------------------------
     Three faces, three jobs. Do not introduce a fourth.
       display  — the felt wordmark only
       felt     — engraved table lettering only
       ui       — every piece of interface text */
  --tb-font-display: 'Pinyon Script', cursive;
  --tb-font-felt:    'Cinzel', Georgia, serif;
  --tb-font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --tb-tracking-label: .20em;  /* uppercase micro-labels */
  --tb-tracking-btn:   .13em;  /* action buttons         */

  /* ---- radius / elevation ----------------------------------------------- */
  --tb-r-sm: 6px;
  --tb-r-md: 11px;
  --tb-r-lg: 14px;
  --tb-shadow-btn:  0 10px 24px -12px #000, inset 0 1px 0 rgba(255,255,255,.07);
  --tb-shadow-pop:  0 18px 40px -14px #000;
  --tb-shadow-card: 0 3px 3px rgba(0,0,0,.45);

  /* ---- motion -----------------------------------------------------------
     Two durations only. UI feedback is fast; things entering the felt are
     slower because they represent physical objects. */
  --tb-t-fast: .16s;
  --tb-t-slow: .22s;
  --tb-ease:   cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --tb-t-fast: 0s; --tb-t-slow: 0s; }
}