/* ========================================================================== BrewNight · 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 { /* Scanner chrome keeps a stable white shutter and contrast over camera imagery. */ --scan-shutter: 72px; --scan-overlay: color-mix(in srgb, var(--pip-ink) 78%, transparent); --scan-ink: var(--fx-white); --scan-frame: #000; /* Photo letterboxing stays black in every palette. */ color-scheme: light; /* ── Surfaces: quiet paper and ink. The default (workshop) palette in ui/themes.css derives exactly these values from its three seeds, so a page with no data-palette yet looks the same as one with it. ─────────────────────────────────────────── */ --felt-deep: #e3e0d8; /* vignette edge of the table */ --felt: #ece9e1; /* the playing surface, image letterboxes */ --bg: #f6f3ea; /* page background (dashboard, setup, results) */ --panel: #fcfbf9; /* cards, panels, rails, dialogs */ --panel2: #f8f5ee; /* controls, raised panels, table-row hover */ --panel3: #e1e3e6; /* hover / pressed / selected surface */ --line: #cfcdc5; /* hairlines, dividers */ --line2: #b0afa8; /* emphasised hairlines, button and sheet borders */ --line3: #1b201c; /* hover borders */ /* ── Text ─────────────────────────────────────────────────────────────── */ --text: #1b201c; /* primary */ --text-hi: #1b201c; /* strong secondary text (game chrome) */ --text2: #363c37; /* long-form body copy */ --muted: #484f48; /* secondary, captions, labels */ --dim: #515750; /* tertiary, hints (4.5:1 on every light palette) */ --ink: #171c18; /* dark text on pale action fills — dark in every theme */ --edge: #7e7f79; /* boundary of fields, checkboxes and other controls that must reach 3:1 (a light slate at night) */ --shade: #171c18; /* what shadows and dimming overlays are made of (see the alpha ladders) */ --paper-shadow: #d8d5ce; /* compatibility only: the old offset-shadow colour. Nothing in ui/ uses it; play/css still does. */ /* ── Accent: the legacy --gold* names are the palette accent (workshop: slate ink) ── */ --gold-dim: #868d92; /* decorative borders */ --gold: #2b3a4a; /* selection, links, accent text */ --gold-hover: #222e3b; /* primary hover */ --gold2: #26333f; /* highlight text */ --on-accent: #ffffff; /* labels on solid accent/status fills; --ink is only for pale action fills */ /* ── Status: fixed meanings, never a palette or mana colour ───────────── */ --green: #295f41; /* ok, ready, you */ --green2: #1f5e3c; /* ok text on paper */ --heal: #245f30; /* life gain, healing */ --warn: #795000; /* caution, stale, waiting on someone */ --danger: #9f221b; /* damage, destructive, error */ --hit: #9e2f22; /* strong damage flash, lethal */ --focus-color: #1a5fd0; /* keyboard focus: the same in every palette so it is never mistaken for a selection */ /* ── Seats: you, then opponents in turn order ─────────────────────────── */ --seat0: #2b3a4a; --seat1: #2c614f; --seat2: #893f26; --seat3: #315775; /* ── 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; /* swatch = the theme picker's colour dots: one solid colour per mono theme, two halves for a guild; the default is slate ink and paper */ --swatch-W: #e6dba4; --swatch-U: #3b7bc0; --swatch-B: #4a3a5e; --swatch-R: #c7432d; --swatch-G: #3f8a4c; --swatch-workshop-a: #2b3a4a; --swatch-workshop-b: #e3dcc8; /* avatar = the signed-in monogram: a fixed fill and text pair per hue, so the letter reads in every theme and mode */ --avatar-0: #3a4a5c; --avatar-0-ink: #ffffff; --avatar-1: #f0a58a; --avatar-2: #f6dc8a; --avatar-3: #9cc4e4; --avatar-4: #a9d3a3; --avatar-ink: #1d1a22; /* ── 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 and glass: always DERIVED from the base colours above, never listed per theme ───── --shade is the colour shadows and dimming overlays are made of (ink on paper, black at night). The --white-a* names are historical: they are the text colour at some opacity. */ --gold-a08: color-mix(in srgb, var(--gold) 8%, transparent); --gold-a15: color-mix(in srgb, var(--gold) 15%, transparent); --gold-a30: color-mix(in srgb, var(--gold) 30%, transparent); --gold-a50: color-mix(in srgb, var(--gold) 50%, transparent); --green-a08: color-mix(in srgb, var(--green2) 8%, transparent); --green-a30: color-mix(in srgb, var(--green2) 30%, transparent); --danger-a08: color-mix(in srgb, var(--danger) 8%, transparent); --danger-a30: color-mix(in srgb, var(--danger) 30%, transparent); --warn-a08: color-mix(in srgb, var(--warn) 8%, transparent); --warn-a30: color-mix(in srgb, var(--warn) 30%, transparent); --white-a10: color-mix(in srgb, var(--text) 10%, transparent); --white-a22: color-mix(in srgb, var(--text) 22%, transparent); --white-a55: color-mix(in srgb, var(--text) 55%, transparent); --black-a25: color-mix(in srgb, var(--shade) 8%, transparent); --black-a45: color-mix(in srgb, var(--shade) 15%, transparent); --black-a60: color-mix(in srgb, var(--shade) 20%, transparent); --black-a75: color-mix(in srgb, var(--shade) 28%, transparent); --scrim: color-mix(in srgb, var(--shade) 60%, transparent); /* modal backdrop */ --chrome: color-mix(in srgb, var(--bg) 97%, transparent); /* sticky paper bars over content */ --glass: color-mix(in srgb, var(--panel) 97%, transparent); /* prompt docks, floating panels */ /* ── Table backdrop (Play) ────────────────────────────────────────────── */ --table-bg: var(--felt); /* ── Typography ───────────────────────────────────────────────────────── */ --font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Archivo Black is for the wordmark, short headings and life/stat figures only. Names, paragraphs and controls are DM Sans. */ --font-display: 'Archivo Black', 'DM Sans', system-ui, sans-serif; --font-figures: var(--font-display); --font-note: var(--font-ui); /* compatibility: the handwritten face is gone; remaining consumers get the reading face */ --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 12 is the floor for anything a decision or a route depends on. 10 and 11 are for noncritical labels only (keyboard hints, counters on art, art credits that are repeated in the reader); do not use them for names, costs, status or actions. */ --fs-account-display: 86px; /* account welcome display */ --fs-marketing-display: 80px; /* public landing page hero */ --fs-marketing-mobile: 56px; /* 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: -.5px; /* h1 and the wordmark */ --ls-caps: 1px; /* eyebrows */ --ls-caps-sm: 1px; /* 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: 10px; /* dialogs, sheets */ --r-5: 12px; /* docks, large floating panels */ --r-6: 14px; /* the table's rounded top edge */ --r-device: 34px; /* a phone's rounded bezel (marketing screenshots) */ --r-device-screen: 27px; /* the screen inside that bezel */ --r-pill: 999px; --r-round: 50%; /* ── Elevation ────────────────────────────────────────────────────────── */ --sh-1: 0 1px 2px color-mix(in srgb, var(--shade) 16%, transparent); /* pips, small chips, buttons */ --sh-2: 0 1px 3px color-mix(in srgb, var(--shade) 14%, transparent), 0 2px 8px color-mix(in srgb, var(--shade) 8%, transparent); /* cards and panels at rest */ --sh-3: 0 4px 14px color-mix(in srgb, var(--shade) 16%, transparent), 0 1px 3px color-mix(in srgb, var(--shade) 10%, transparent); /* popovers, lifted cards */ --sh-4: 0 12px 32px color-mix(in srgb, var(--shade) 24%, transparent), 0 2px 6px color-mix(in srgb, var(--shade) 12%, transparent); /* 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 */ --shelf-card-min: 220px; /* ── Page frame (library, collection, dashboard) ──────────────────────── */ --page-max: 1320px; /* content column of every non-game page */ --page-pad: 32px; /* side gutter; 16px on phones (kit.css) */ --workspace-sticky-top: 0px; /* native pages replace this with the status safe area */ --bar-h: 76px; /* top bar height */ --vv-top: 0px; /* visible screen under the keyboard; the search sheet updates both while open */ --vv-h: 100dvh; /* ── Focus ────────────────────────────────────────────────────────────── */ --focus: 3px solid var(--focus-color); --focus-offset: 3px; /* ── Control sizes: 36px on a pointer, 44px wherever a finger is the pointer or the screen is a phone ── */ --control-h: 36px; --control-sm: 30px; --tap: 44px; --filter-h: 36px; /* compact visual height; touch wrappers retain --tap */ } @media (pointer: coarse), (max-width: 560px) { :root { --control-h: 44px; --control-sm: 44px; } } /* Provider sign-in branding stays neutral across application themes. */ :root { --apple-bg: #111; --apple-text: #fff; --apple-hover: #262626; --google-border: #747775; --google-bg: #fff; --google-text: #1f1f1f; --google-hover: #f2f2f2; } /* Primary action fill, and the compatibility names the Workshop pass introduced. Each compatibility name now has a neutral value; delete it once its last consumer (play/css/*, ui/library.css, ui/account.css, ui/privacy.css, ui/marketing, scan/scan.css, style.css, deck-insights/insights.css) stops using it. New code uses --panel3, --line2, --sh-1..4 and --r-2 instead. */ :root { --action-bg: #e3dcc8; --action-hover: #d6cdb4; --lilac: var(--panel3); --coral: #cfc9b8; --outline: 1px solid var(--line2); --sh-button: var(--sh-1); --sh-nav: none; --sh-seat: var(--sh-1); --sh-card: var(--sh-1); --sh-paper: var(--sh-2); --r-ticket: var(--r-2); --notebook-lines: none; }