/* ============================================================ MASTER DESIGN TOKENS — Home Game, card-box Americana (docs/STYLE_GUIDE.md) ============================================================ Single source of truth for ALL visual properties. HOW TO UPDATE: 1. Edit values here 2. Run: npm run css:build (or ./scripts/build-css.sh) 3. Every component updates automatically. ============================================================ */ :root { /* ── Card-box Americana palette (docs/STYLE_GUIDE.md) ─────── Named colours. Everything below maps onto these; pages use the semantic names, never the hex values. */ --hg-navy: #1D2A44; /* ink, header, card backs */ --hg-navy-deep: #0F1830; /* behind the table */ --hg-cream: #F2E8D0; /* the box */ --hg-paper: #F7F0DE; /* inputs, quiet panels */ --hg-card: #FFFDF6; /* cards and score sheets */ --hg-gold: #C9A84C; /* buttons, rules, on navy */ --hg-gold-deep: #B8963E; --hg-oxblood: #8C1C22; /* small red text on cream */ --hg-red-hi: #9E2329; /* red band gradient */ --hg-red: #7E171C; --hg-red-lo: #5A0E13; --hg-ink-2: #2C3A57; /* body text on cream */ --hg-ink-3: #3E4A63; /* quiet text on cream */ --hg-cream-2: #E2D8C0; /* quiet text on navy */ --hg-blush: #F3DAD5; /* small text on red */ --hg-rule: #C9C1AE; /* hairlines on cream */ --hg-felt: #163049; /* the table */ --hg-suit-red: #B3262D; /* Patterns */ --hg-weave: repeating-linear-gradient(45deg, rgba(242,232,208,.05) 0 1px, transparent 1px 18px), repeating-linear-gradient(-45deg, rgba(242,232,208,.05) 0 1px, transparent 1px 18px); --hg-weave-felt: repeating-linear-gradient(45deg, rgba(242,232,208,.06) 0 1px, transparent 1px 18px), repeating-linear-gradient(-45deg, rgba(242,232,208,.06) 0 1px, transparent 1px 18px); --hg-card-back: repeating-linear-gradient(45deg, rgba(201,168,76,.35) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, rgba(201,168,76,.35) 0 1px, transparent 1px 5px); --hg-red-band: radial-gradient(ellipse 70% 120% at 25% 0%, #B3323A 0%, rgba(179,50,58,0) 60%), linear-gradient(160deg, #9E2329 0%, #7E171C 45%, #5A0E13 100%); --hg-shadow: 4px 4px 0 var(--hg-navy); --hg-shadow-lg: 8px 8px 0 var(--hg-navy); /* ── Brand ──────────────────────────────────────────────────── Gold fills buttons (navy label). Gold is never text on cream. */ --color-primary: var(--hg-gold); --color-primary-hover: #D4B65C; --color-primary-active: var(--hg-gold-deep); --color-primary-border: var(--hg-navy); --color-on-primary: var(--hg-navy); --color-link: var(--hg-navy); /* links on cream */ --color-accent-text: var(--hg-oxblood);/* small coloured text */ /* ── Neutrals ─────────────────────────────────────────────── */ --color-white: #ffffff; --color-black: #000000; --color-gray-50: #fafafa; --color-gray-100: #f4f4f5; --color-gray-200: #e8e8e8; --color-gray-300: rgba(29,42,68,0.15); --color-gray-400: rgba(29,42,68,0.4); --color-gray-500: #6b6f7a; --color-gray-600: var(--hg-ink-3); --color-gray-700: var(--hg-ink-2); --color-gray-800: var(--hg-navy); /* ── Semantic / Feedback (on cream) ──────────────────────────*/ --color-success: rgba(31,107,58,0.10); --color-success-border: rgba(31,107,58,0.45); --color-success-text: #1F6B3A; --color-error: rgba(140,28,34,0.08); --color-error-border: rgba(140,28,34,0.45); --color-error-text: var(--hg-oxblood); --color-warning: rgba(138,90,10,0.10); --color-warning-border: rgba(138,90,10,0.45); --color-warning-text: #7A4E06; --color-info: rgba(29,42,68,0.07); --color-info-border: rgba(29,42,68,0.40); --color-info-text: var(--hg-navy); /* ── Surfaces: the cream box ─────────────────────────────────*/ --color-bg-app: var(--hg-cream); --color-bg-card: var(--hg-card); --color-bg-panel: var(--hg-paper); --color-bg-header: var(--hg-navy); --color-bg-footer: var(--hg-navy); --color-bg-overlay: rgba(15, 24, 48, 0.72); --color-bg-input: var(--hg-paper); /* ── Borders ─────────────────────────────────────────────────*/ --color-border: var(--hg-rule); --color-border-input: var(--hg-navy); --color-border-focus: var(--hg-navy); /* ── Text Colors ─────────────────────────────────────────────*/ --color-text-primary: var(--hg-navy); --color-text-secondary: var(--hg-ink-2); --color-text-muted: var(--hg-ink-3); --color-text-dim: #5E6679; /* ── Typography ──────────────────────────────────────────────*/ --font-family: 'Libre Franklin', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-family-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --font-family-mono: 'Courier Prime', 'Courier New', monospace; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ── Spacing Scale ─────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ── Radii ────────────────────────────────────────────────────*/ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.125rem; /* 2px: printed boxes are square */ --radius-lg: 0.25rem; /* 4px */ --radius-xl: 0.375rem; /* 6px */ --radius-full: 9999px; /* ── Shadows ──────────────────────────────────────────────────*/ --shadow-sm: 2px 2px 0 rgba(29, 42, 68, 0.9); --shadow-md: 4px 4px 0 var(--hg-navy); --shadow-lg: 8px 8px 0 var(--hg-navy); --shadow-xl: 0 20px 25px -5px rgba(15, 24, 48, 0.45), 0 8px 10px -6px rgba(15, 24, 48, 0.3); /* ── Transitions ──────────────────────────────────────────────*/ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; /* ── Z-Index Scale ────────────────────────────────────────────*/ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-header: 50; --z-overlay: 60; --z-modal: 70; --z-toast: 80; /* ── Layout ───────────────────────────────────────────────────*/ --max-width-app: 72.5rem; /* 1160px */ --header-height: 4.5rem; /* 72px */ --footer-height: 3.5rem; /* 56px */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); /* ── Component Dimensions ────────────────────────────────────*/ --btn-height: 2.5rem; /* 40px */ --btn-height-lg: 3rem; /* 48px */ --btn-height-sm: 2rem; /* 32px */ --input-height: 2.5rem; /* 40px */ /* ── Visual Effects ───────────────────────────────────────────*/ --backdrop-blur: 8px; /* =========================================================== POKER TABLE TOKENS =========================================================== */ /* ── Felt & Rail ─────────────────────────────────────────────*/ --poker-felt-green: var(--hg-felt); /* navy felt (name kept) */ --poker-felt-green-light: #1E3D5C; --poker-felt-green-dark: #0F2236; --poker-rail-brown: var(--hg-red); /* oxblood rail */ --poker-rail-brown-dark: var(--hg-red-lo); --poker-rail-leather: var(--hg-red-hi); /* ── Playing Cards ───────────────────────────────────────────*/ --card-bg: var(--hg-card); /* card face */ --card-border: var(--hg-navy); --card-shadow: 0 2px 8px rgba(0,0,0,0.4); --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.55); --card-radius: 0.3rem; /* playing card corner */ /* Responsive card widths */ --card-width-sm: 2.5rem; /* 40px — mobile / compact */ --card-width-md: 3.5rem; /* 56px — tablet */ --card-width-lg: 4.5rem; /* 72px — desktop full view */ --card-aspect: 1.4; /* Standard playing card H/W */ /* Suit colors */ --suit-red: var(--hg-suit-red); /* Hearts & Diamonds */ --suit-black: var(--hg-navy); /* Clubs & Spades */ /* ── Card Back Design ────────────────────────────────────────*/ --card-back-primary: var(--hg-navy); /* navy with gold weave */ --card-back-secondary: #c9a84c; /* Gold diamond pattern */ --card-back-border: var(--hg-cream); /* cream edge */ /* ── Chip Colors ─────────────────────────────────────────────*/ --chip-white: #f8f8f8; --chip-red: #c0392b; --chip-blue: #2471a3; --chip-green: #1e8449; --chip-black: #1c1c1c; --chip-purple: #7d3c98; --chip-yellow: #d4ac0d; --chip-size: 2rem; /* 32px */ --chip-size-sm: 1.5rem; /* 24px */ /* ── Player Seats ────────────────────────────────────────────*/ --seat-active-glow: 0 0 0 2px #c9a84c, 0 0 12px rgba(201,168,76,0.45); --seat-active-border: #c9a84c; --seat-inactive-border: rgba(255,255,255,0.12); --seat-folded-opacity: 0.35; --seat-winner-glow: 0 0 0 3px #C9A84C, 0 0 20px rgba(201,168,76,0.6); --seat-turn-ring: 0 0 0 3px #c9a84c, 0 0 16px rgba(201,168,76,0.5); /* ── Pot Display ─────────────────────────────────────────────*/ --pot-bg: var(--hg-cream); --pot-border: var(--hg-navy); --pot-text: var(--hg-navy); /* ── Action Bar Buttons ──────────────────────────────────────*/ /* Red is never an action. Gold for go, outlines for fold and check. */ --action-fold-bg: transparent; --action-fold-hover: rgba(242,232,208,0.08); --action-call-bg: var(--hg-gold); --action-call-hover: #D4B65C; --action-raise-bg: var(--hg-gold); --action-raise-hover: #D4B65C; --action-check-bg: transparent; --action-check-hover: rgba(242,232,208,0.08); /* ── Card Deal Animations ────────────────────────────────────*/ --card-deal-duration: 300ms; --card-flip-duration: 400ms; --chip-slide-duration: 200ms; --highlight-pulse: 1.5s; } /* The box is light; the table (and anything marked .hg-dark) is navy. Custom properties inherit, so overriding them on the element re-themes everything inside it, Tailwind colours included. */ .dark { color-scheme: light; } .hg-dark, .ct-page { color-scheme: dark; --color-link: var(--hg-cream); --color-accent-text: var(--hg-gold); --color-bg-app: var(--hg-navy-deep); --color-bg-card: var(--hg-navy); --color-bg-panel: #24324F; --color-bg-header: var(--hg-navy); --color-bg-input: #24324F; --color-bg-overlay: rgba(5, 10, 22, 0.82); --color-border: rgba(242,232,208,0.22); --color-border-input: rgba(242,232,208,0.45); --color-border-focus: var(--hg-gold); --color-primary-border: var(--hg-cream); --color-text-primary: var(--hg-cream); --color-text-secondary: var(--hg-cream-2); --color-text-muted: var(--hg-cream-2); --color-text-dim: #A8A493; --color-success-text: #8FD6A5; --color-success: rgba(143,214,165,0.12); --color-success-border: rgba(143,214,165,0.4); --color-error-text: #F3B4AC; --color-error: rgba(243,180,172,0.12); --color-error-border: rgba(243,180,172,0.45); --color-warning-text: #F0C987; --color-warning: rgba(240,201,135,0.12); --color-warning-border: rgba(240,201,135,0.4); --color-info-text: var(--hg-cream); --color-info: rgba(242,232,208,0.08); --color-info-border: rgba(242,232,208,0.35); --shadow-md: 0 6px 14px rgba(0,0,0,0.45); --shadow-lg: 0 10px 24px rgba(0,0,0,0.5); } /* The table page's own background, under the .ct-page box. */ html:has(.ct-page) body { background-color: var(--hg-navy-deep); } /* Card stock inside a dark area (the table's side panels, the hand result): back to the box's light colours. */ .hg-light { color-scheme: light; --color-link: var(--hg-navy); --color-accent-text: var(--hg-oxblood); --color-bg-app: var(--hg-paper); --color-bg-card: var(--hg-card); --color-bg-panel: var(--hg-paper); --color-bg-input: var(--hg-paper); --color-border: var(--hg-rule); --color-border-input: var(--hg-navy); --color-border-focus: var(--hg-navy); --color-primary-border: var(--hg-navy); --color-text-primary: var(--hg-navy); --color-text-secondary: var(--hg-ink-2); --color-text-muted: var(--hg-ink-3); --color-text-dim: #5E6679; --color-success-text: #1F6B3A; --color-success: rgba(31,107,58,0.10); --color-success-border: rgba(31,107,58,0.45); --color-error-text: var(--hg-oxblood); --color-error: rgba(140,28,34,0.08); --color-error-border: rgba(140,28,34,0.45); --color-warning-text: #7A4E06; --color-warning: rgba(138,90,10,0.10); --color-warning-border: rgba(138,90,10,0.45); --color-info-text: var(--hg-navy); --color-info: rgba(29,42,68,0.07); --color-info-border: rgba(29,42,68,0.40); color: var(--hg-navy); }