/* ==========================================================================
   Rule Zero · design tokens — the ONE place raw visual values live.
   Loaded by the dashboard (index.html) and the Play page (play/index.html).
   Rule: nothing outside this file writes a hex colour, a px font-size from
   the ladder, a radius, a shadow, an easing or a z-index. Use a token; if you
   need a new value, add it here with a comment. `tests/ui-tokens.test.mjs`
   enforces this for style.css, ui/*.css and play/*.css.
   Breakpoints are not tokens (custom properties cannot be used in @media):
     --bp-sm 560px · --bp-md 850px · --bp-lg 1120px · --bp-xl 1550px
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ── Surfaces: one green-black ramp, each step a notch more elevated ─────── */
  --felt-deep: #0a1311;   /* vignette edge of the table                         */
  --felt:      #0d1714;   /* the playing surface, image letterboxes             */
  --bg:        #101b18;   /* page background (dashboard, setup, results)        */
  --panel:     #17231f;   /* cards, panels, rails, dialogs                      */
  --panel2:    #1c2a25;   /* controls, raised panels, table-row hover           */
  --panel3:    #2a3b31;   /* hover / pressed / selected surface                 */
  --line:      #304139;   /* hairlines                                          */
  --line2:     #3d5148;   /* emphasised hairlines, sheet borders                */
  --line3:     #718676;   /* hover borders, strong control outlines             */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text:      #f1efe3;   /* primary                                            */
  --text-hi:   #dfe6e0;   /* bright secondary on dark glass (game chrome)       */
  --text2:     #c0cbc3;   /* long-form body copy                                */
  --muted:     #98aaa0;   /* secondary, captions, labels                        */
  --dim:       #6f8177;   /* tertiary, disabled, hints                          */
  --ink:       #17231e;   /* dark text on gold / light surfaces                 */

  /* ── Accent: gold = interactive affordance and emphasis only ──────────── */
  --gold-dim:   #756546;  /* decorative borders                                 */
  --gold:       #d2b777;  /* primary accent                                     */
  --gold-hover: #e4ca8f;  /* primary hover                                      */
  --gold2:      #ecd8a3;  /* highlight text, toast, glints                      */

  /* ── Status ───────────────────────────────────────────────────────────── */
  --green:     #9bbd9f;   /* sage: ok, ready, you                               */
  --green2:    #afd1b2;   /* status text on dark green                          */
  --heal:      #8fd18a;   /* life gain, healing                                 */
  --danger:    #e08c86;   /* damage, destructive, error                         */
  --hit:       #d9715f;   /* strong damage flash, lethal                        */

  /* ── Seats: you, then opponents in turn order ─────────────────────────── */
  --seat0: #d2b777;
  --seat1: #91bda5;
  --seat2: #b7a2c5;
  --seat3: #8caebd;

  /* ── Mana ─────────────────────────────────────────────────────────────── */
  /* glow = vivid, for rings, orbs, particles                                   */
  --mana-W: #f4efd0;  --mana-U: #6aa9e0;  --mana-B: #a595ba;  --mana-R: #e8714e;  --mana-G: #72bb6c;  --mana-C: #cbc7bd;
  /* pip = muted disc fill for the printed-symbol chips                         */
  --pip-W:  #e5deae;  --pip-U:  #9cbdd8;  --pip-B:  #b8aebd;  --pip-R:  #dd9d8e;  --pip-G:  #9abf9d;  --pip-C:  #b9b9af;
  --pip-ink: #171c18;

  /* ── FX: canvas particles, foil, cinematic accents (read by play/motion.js too) ── */
  --fx-spark: #ffd27a;  --fx-ember-1: #ffb04a;  --fx-ember-2: #ff7a3d;  --fx-hot: #fff3b8;  --fx-white: #ffffff;
  --fx-blood: #e8714e;  --fx-blood-hi: #ffb4a8;  --fx-win: #ffe08a;  --fx-ink: #1a1b12;
  --plate-hi: #f4eddb;  --plate-buff: #c8efc0;  --plate-debuff: #f5bdb1;   /* P/T plate: normal · buffed · debuffed */
  --tk-ink: #17180f;  --gold-deep: #bfa05e;  --coin-hi: #fff4c8;  --coin-mid: #ebc96d;  --coin-lo: #a67a20;  --coin-rim: #8a6317;  --coin-ink: #4a350c;

  /* ── Alpha ladders (translucent overlays on any surface) ──────────────── */
  --gold-a08:  rgb(210 183 119 / .08);   --gold-a15:  rgb(210 183 119 / .15);
  --gold-a30:  rgb(210 183 119 / .30);   --gold-a50:  rgb(210 183 119 / .50);
  --green-a08: rgb(148 185 154 / .08);   --green-a30: rgb(166 198 160 / .30);
  --danger-a08: rgb(221 147 144 / .08);  --danger-a30: rgb(224 140 134 / .30);
  --white-a10: rgb(255 255 255 / .10);   --white-a22: rgb(255 255 255 / .22);   --white-a55: rgb(255 255 255 / .55);
  --black-a25: rgb(0 0 0 / .25);         --black-a45: rgb(0 0 0 / .45);         --black-a60: rgb(0 0 0 / .60);   --black-a75: rgb(0 0 0 / .75);
  --scrim:     rgb(4 12 8 / .74);        /* modal backdrop                       */
  --chrome:    rgb(16 27 24 / .96);      /* sticky bars over content             */
  --glass:     rgb(23 35 31 / .72);      /* prompt docks, floating panels        */

  /* ── Table backdrop (Play) ────────────────────────────────────────────── */
  --table-bg: radial-gradient(1400px 780px at 50% 62%, #1a3227 0%, #0f1b17 52%, var(--felt-deep) 100%);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-ui:      'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Libre Caslon Display', 'Iowan Old Style', Georgia, serif;
  --font-figures: Georgia, 'Iowan Old Style', 'Times New Roman', serif;   /* statistics: Georgia's old-style numerals are intentional */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;
  /* ladder (px): 10 11 12 13 14 16 18 20 24 28 32 40 48 56 64                  */
  --fs-account-display: 86px; /* account welcome display */
  --fs-marketing-display: 100px; /* public landing page hero */
  --fs-marketing-mobile: 78px; /* compact landing page closing statement */
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px;
  --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-56: 56px; --fs-64: 64px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --lh-tight: 1.02; --lh-snug: 1.35; --lh-body: 1.6; --lh-loose: 1.8;
  --ls-display: -1.6px;   /* h1                                                  */
  --ls-caps: 2.2px;       /* eyebrows                                            */
  --ls-caps-sm: 1.2px;    /* small caps labels                                   */

  /* ── Spacing (4px grid, with the half-steps the dashboard uses) ──────── */
  --sp-0: 2px;  --sp-1: 4px;  --sp-1h: 6px;  --sp-2: 8px;  --sp-2h: 10px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;  --sp-8: 40px; --sp-9: 56px;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --r-1: 4px;      /* badges, kbd, tiny chips          */
  --r-2: 6px;      /* buttons, fields                  */
  --r-3: 8px;      /* tiles, panels                    */
  --r-4: 12px;     /* dialogs, sheets                  */
  --r-5: 16px;     /* docks, large floating panels     */
  --r-6: 22px;     /* the table's rounded top edge     */
  --r-pill: 999px;
  --r-round: 50%;

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --sh-1: 0 1px 2px rgb(0 0 0 / .33);               /* pips, small chips            */
  --sh-2: 0 2px 6px rgb(0 0 0 / .55);               /* cards at rest                */
  --sh-3: 0 6px 20px rgb(0 0 0 / .53);              /* popovers, lifted cards       */
  --sh-4: 0 30px 90px rgb(0 0 0 / .7);              /* dialogs, sheets              */
  --ring: 0 0 0 2px var(--gold);                    /* selected                     */
  --ring-soft: 0 0 0 1px var(--gold-a30);           /* selected tile                */
  --glow-gold: 0 0 0 3px var(--gold-a15), 0 6px 20px var(--gold-a30);   /* playable / hover affordance */

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease:   cubic-bezier(.2, .8, .2, 1);            /* everything that settles      */
  --pop:    cubic-bezier(.34, 1.56, .64, 1);        /* overshoot: arrivals, badges  */
  --ease-io: cubic-bezier(.65, 0, .35, 1);          /* symmetric moves              */
  --t-1: .12s;  --t-2: .18s;  --t-3: .28s;  --t-4: .45s;       /* UI transitions   */
  /* choreography budgets — read by play/motion.js (× the player's speed setting)   */
  --d-flip: 260ms;  --d-flight: 520ms;  --d-pop: 220ms;  --d-fade: 180ms;  --d-beat: 380ms;

  /* ── Layers ───────────────────────────────────────────────────────────── */
  --z-row: 2;  --z-hover: 4;  --z-raised: 10;  --z-ui: 12;  --z-flight: 20;  --z-dock: 20;  --z-chrome: 30;  --z-lift: 70;  --z-panel: 500;  --z-prompt: 600;
  --z-sheet: 700;  --z-modal: 900;  --z-toast: 1000;  --z-tip: 1100;  --z-fx: 1200;

  /* ── Cards ────────────────────────────────────────────────────────────── */
  --card-aspect: 488 / 680;
  --card-r: 4.6% / 3.3%;        /* matches the printed corner; clips Scryfall's square JPEG corners */

  /* ── Focus ────────────────────────────────────────────────────────────── */
  --focus: 2px solid var(--gold);
  --focus-offset: 3px;
}

/* Google's neutral sign-in button branding. */
:root { --google-border: #747775; --google-bg: #fff; --google-text: #1f1f1f; --google-hover: #f2f2f2; }