/* ========================================================================== Casino Felt — Design Tokens The single source of truth for color, type, spacing, radii, shadow. Component CSS in /styles must reference these vars — never hardcode. ========================================================================== */ :root { /* ---------- Color: surface (the felt table) ----------------------------- */ --cf-felt-900: #062a14; /* deep table edge / shadow side */ --cf-felt-800: #0c4725; /* primary felt mid-tone */ --cf-felt-700: #0f5b2f; /* primary felt highlight (radial center) */ --cf-felt-600: #16703c; /* lifted felt, hover surface */ --cf-felt-500: #1f8a4d; /* felt accent / pip-light area */ /* ---------- Color: scoresheet (cream paper / ruled pad) ----------------- */ --cf-paper-50: #fbf7ec; /* brightest cream, primary panel */ --cf-paper-100: #f4ecd6; /* default scoresheet */ --cf-paper-200: #e7dcc1; /* sunk panel / striped row */ --cf-paper-300: #c9bb98; /* hairline rule, divider */ --cf-paper-400: #97896a; /* secondary ink */ /* ---------- Color: ink (pencil scratchings on the scoresheet) ---------- */ --cf-ink-900: #1a1408; /* primary text on cream */ --cf-ink-700: #3a2f1c; /* body text on cream */ --cf-ink-500: #6a5a3f; /* secondary text on cream */ --cf-ink-300: #a0916f; /* tertiary, captions, locked rows */ /* ---------- Color: dice (ivory cubes, dark pips) ----------------------- */ --cf-die-hi: #ffffff; --cf-die: #f9f9f4; --cf-die-lo: #ecebe4; --cf-die-edge: #d6d2c0; --cf-pip: #121212; --cf-pip-hi: #3a3a3a; /* ---------- Color: foil & accents -------------------------------------- */ --cf-gold-700: #8a6a1c; /* shadow side of gold foil */ --cf-gold-500: #d4a13a; /* primary gold foil */ --cf-gold-300: #f1cf6b; /* highlight */ --cf-gold-100: #fff1c2; /* glow on dark felt */ --cf-crimson-700: #6b1320; /* pressed crimson */ --cf-crimson-600: #8a1a2a; --cf-crimson-500: #b82033; /* primary CTA */ --cf-crimson-400: #d73a4d; --cf-chip-blue: #2c6bd6; /* informational tag, "held" cyan accent */ --cf-chip-blue-fg: #d7eaff; /* ---------- Semantic colors -------------------------------------------- */ --cf-bg: radial-gradient(1200px 600px at 20% 0%, var(--cf-felt-700), var(--cf-felt-800)); --cf-bg-solid: var(--cf-felt-800); --cf-surface: var(--cf-paper-50); /* default scoresheet panel */ --cf-surface-sunk: var(--cf-paper-100); --cf-surface-stripe: var(--cf-paper-200); --cf-surface-on-felt: rgba(11, 50, 29, 0.92); /* dark panel on felt */ --cf-fg: var(--cf-ink-900); /* default text on cream */ --cf-fg-muted: var(--cf-ink-500); --cf-fg-faint: var(--cf-ink-300); --cf-fg-on-felt: #f5f7fb; --cf-fg-on-felt-muted: #c6d3e6; --cf-rule: var(--cf-paper-300); /* hairline ruling */ --cf-rule-strong: var(--cf-ink-900); --cf-rule-felt: rgba(0, 0, 0, 0.45); --cf-accent: var(--cf-gold-500); /* win / bonus */ --cf-accent-fg: var(--cf-felt-900); --cf-primary: var(--cf-crimson-500); --cf-primary-hover: var(--cf-crimson-400); --cf-primary-press: var(--cf-crimson-700); --cf-primary-fg: #fff5ef; --cf-held: var(--cf-chip-blue); /* held-die outline */ --cf-success: #2f7d3e; --cf-danger: var(--cf-crimson-500); --cf-warning: var(--cf-gold-500); /* ---------- Type ------------------------------------------------------- */ --cf-font-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif; --cf-font-numeric: "Segoe UI", "Helvetica Neue", "DejaVu Sans", Arial, sans-serif; --cf-font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif; --cf-fs-12: 12px; --cf-lh-12: 1.4; --cf-fs-13: 13px; --cf-lh-13: 1.45; --cf-fs-14: 14px; --cf-lh-14: 1.5; --cf-fs-16: 16px; --cf-lh-16: 1.5; /* base */ --cf-fs-18: 18px; --cf-lh-18: 1.4; --cf-fs-20: 20px; --cf-lh-20: 1.3; /* h3 */ --cf-fs-24: 24px; --cf-lh-24: 1.25; /* h2 */ --cf-fs-32: 32px; --cf-lh-32: 1.15; /* h1 */ --cf-fs-44: 44px; --cf-lh-44: 1.05; /* score readout / hero */ --cf-fw-regular: 400; --cf-fw-medium: 600; --cf-fw-bold: 700; --cf-fw-heavy: 800; --cf-tracking-tight: -0.01em; --cf-tracking-base: 0; --cf-tracking-wide: 0.04em; --cf-tracking-cap: 0.12em; /* small-caps section labels */ /* ---------- Semantic type roles --------------------------------------- */ --cf-h1: var(--cf-fw-heavy) var(--cf-fs-32) / var(--cf-lh-32) var(--cf-font-display); --cf-h2: var(--cf-fw-heavy) var(--cf-fs-24) / var(--cf-lh-24) var(--cf-font-display); --cf-h3: var(--cf-fw-bold) var(--cf-fs-20) / var(--cf-lh-20) var(--cf-font-display); --cf-body: var(--cf-fw-regular) var(--cf-fs-16) / var(--cf-lh-16) var(--cf-font-sans); --cf-small: var(--cf-fw-regular) var(--cf-fs-13) / var(--cf-lh-13) var(--cf-font-sans); --cf-caption: var(--cf-fw-medium) var(--cf-fs-12) / var(--cf-lh-12) var(--cf-font-sans); --cf-numeric-readout: var(--cf-fw-heavy) var(--cf-fs-44) / var(--cf-lh-44) var(--cf-font-numeric); --cf-numeric-cell: var(--cf-fw-bold) var(--cf-fs-18) / 1.1 var(--cf-font-numeric); /* ---------- Spacing — 4px base ---------------------------------------- */ --cf-space-0: 0; --cf-space-1: 4px; --cf-space-2: 8px; --cf-space-3: 12px; --cf-space-4: 16px; --cf-space-5: 20px; --cf-space-6: 24px; --cf-space-8: 32px; --cf-space-10: 40px; --cf-space-12: 48px; --cf-space-16: 64px; /* ---------- Radii ----------------------------------------------------- */ --cf-radius-sm: 6px; /* small chips, tags */ --cf-radius-md: 12px; /* dice, default buttons */ --cf-radius-lg: 16px; /* score table corners */ --cf-radius-xl: 18px; /* main panels */ --cf-radius-pill: 999px; /* ---------- Shadow / elevation ---------------------------------------- */ /* Felt-side shadows (deep, atmospheric, dropped on dark) */ --cf-shadow-felt-sm: 0 4px 12px rgba(0, 0, 0, 0.30); --cf-shadow-felt-md: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.06); --cf-shadow-felt-lg: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.08); /* Paper-side shadows (subtle, like a pad on a table) */ --cf-shadow-paper-sm: 0 1px 0 var(--cf-paper-300); --cf-shadow-paper-md: 0 2px 0 var(--cf-paper-300), 0 8px 18px rgba(0, 0, 0, 0.18); /* Die shadow — the signature 3D cube look */ --cf-shadow-die: 0 4px 0 rgba(0, 0, 0, 0.35), 0 18px 24px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.20); --cf-shadow-die-held: 0 4px 0 rgba(0, 0, 0, 0.35), 0 22px 30px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.20); /* Inner rule on dark surfaces (highlight line at the top of a panel) */ --cf-shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* Gold foil glow (use sparingly — win, bonus, yahtzee) */ --cf-shadow-gold: 0 0 0 1px var(--cf-gold-500), 0 0 24px rgba(241, 207, 107, 0.45); /* ---------- Motion ---------------------------------------------------- */ --cf-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --cf-ease-out: cubic-bezier(0, 0, 0.2, 1); --cf-dur-instant: 80ms; --cf-dur-fast: 120ms; --cf-dur-base: 200ms; --cf-dur-slow: 450ms; --cf-dur-shake: 450ms; /* ---------- Layout widths --------------------------------------------- */ --cf-container: 1120px; --cf-panel-min: 320px; } /* ========================================================================== Base body styles — apply when this stylesheet is the only thing loaded. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font: var(--cf-body); color: var(--cf-fg-on-felt); background: var(--cf-bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* The two surface contexts: felt (dark) vs scoresheet (light). Scope a region with .cf-on-paper to flip text color appropriately. */ .cf-on-paper { color: var(--cf-fg); background: var(--cf-surface); } h1 { font: var(--cf-h1); margin: 0 0 var(--cf-space-3); letter-spacing: var(--cf-tracking-tight); } h2 { font: var(--cf-h2); margin: 0 0 var(--cf-space-3); letter-spacing: var(--cf-tracking-tight); } h3 { font: var(--cf-h3); margin: 0 0 var(--cf-space-2); } p { font: var(--cf-body); margin: 0 0 var(--cf-space-3); } small { font: var(--cf-small); color: var(--cf-fg-on-felt-muted); } /* Tabular numerics — required for the score column to align */ .cf-num, .cf-score-cell, table.cf-scoresheet td, table.cf-scoresheet th[scope="row"] + td { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* Section eyebrow — the small-caps tag used above panel titles */ .cf-eyebrow { font: var(--cf-caption); text-transform: uppercase; letter-spacing: var(--cf-tracking-cap); color: var(--cf-fg-on-felt-muted); } .cf-on-paper .cf-eyebrow { color: var(--cf-ink-500); }