/* ── FlopMAX design tokens ─────────────────────────────────────────────────── Three tiers (docs/design-tokens.md): 1. Primitives raw palette, scales and fonts. Never referenced by components. 2. Semantic what a value is FOR: surfaces, text, status, actions. Themed — the dark block below overrides only this tier. 3. Domain trainer vocabulary: provenance, decision grades, EV, equity, seats, table, cards. Built from tier 2, so they theme for free. Components use tiers 2 and 3 only. A hex value anywhere outside this file is a bug, with two exceptions: third-party marks (the Google "G") and component-local custom properties set from JS (cascade's --fill). Fonts are loaded once, by templates/partials/fonts.html — not from here. ─────────────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* ── 1. Primitives ─────────────────────────────────────────────────────── */ /* Brand green ramp. 500 is the logo green. */ --green-50: #EDF7ED; --green-100: #D3EDD2; --green-200: #A9DBA7; --green-300: #7DC77A; --green-400: #5FB65C; --green-500: #4BA449; --green-600: #3D8A3B; --green-700: #31702F; --green-800: #255524; --green-900: #1A3C19; /* Neutrals (light UI) and inks (dark UI) */ --white: #FFFFFF; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; --ink-800: #272B34; --ink-850: #1E2128; --ink-900: #161920; --ink-950: #0D0F14; --black: #000000; /* Accents */ --red-300: #FCA5A5; --red-400: #F87171; --red-500: #EF4444; --red-600: #DC2626; --red-700: #B91C1C; --red-900: #7F1D1D; --amber-400: #FBBF24; --amber-600: #D97706; --amber-700: #B45309; --orange-500: #F97316; --orange-600: #EA580C; --purple-600: #7C3AED; --blue-400: #60A5FA; --blue-500: #3B82F6; --blue-600: #2563EB; --emerald-400: #4ADE80; --emerald-500: #22C55E; --emerald-600: #16A34A; /* Leather, for the table's cushion */ --leather-500: #8B5A3C; --leather-600: #6E4429; --leather-700: #55331E; /* The table colours a player may pick (utils/table_colours.py): felt, cushion and card-back bases. Deep, so white text and the lighter shield mark read on them; the defaults are the green and leather above. */ --felt-blue-700: #1F4F7A; --felt-teal-700: #17675F; --felt-red-700: #7D2430; --felt-purple-700: #4E3170; --felt-grey-700: #3A3F45; --leather-tan: #9A6B3E; --leather-black: #1F1C1A; --leather-oxblood: #5C1E22; --leather-navy: #23304A; --leather-cream: #CBB896; --back-red-700: #A02C2E; --back-blue-700: #234E9C; --back-black: #1F2328; --back-purple-700: #5C3A8E; --back-gold-700: #94782E; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Typography. Six families, each with one job: sans Roboto body copy and UI controls title Oswald headings brand Saira the FlopMAX wordmark only (italic, 112% wide) card Roboto Cond the rank on a playing card (a 7 that can't pass for a 1) display Montserrat large display type: hero lines, marketing, empty states mono JetBrains numbers — VPIP, combos, bb sizes, frequencies */ --font-sans: 'Roboto', system-ui, sans-serif; --font-title: 'Oswald', 'Roboto Condensed', sans-serif; --font-brand: 'Saira', 'Oswald', sans-serif; --font-card: 'Roboto Condensed', 'Roboto', sans-serif; --font-display: 'Montserrat', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Type scale. rem, so the whole UI follows the browser's font-size setting. The small end is fine-grained on purpose: this is a data-dense tool, and most text is mono numbers and uppercase labels at 10-13px. 2xs 10 badges, legends, captions, stat keys xs 11 grid headers, sidebar labels, notes sm 12 action buttons, toggles, suggestions ui 13 dense UI text: inputs, tooltips, footer md 14 buttons, nav links, stats base 16 body; card titles lg 18 section titles, lead copy xl 20 page titles, the table-corner wordmark; h3 2xl 24 large readouts: hand result, keypad keys 3xl 28 big numeric readouts; h2 4xl 40 hero lines; h1 5xl 56 landing hero title */ --font-size-2xs: 0.625rem; --font-size-xs: 0.6875rem; --font-size-sm: 0.75rem; --font-size-ui: 0.8125rem; --font-size-md: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.75rem; --font-size-4xl: 2.5rem; --font-size-5xl: 3.5rem; /* Motion */ --duration-fast: 80ms; --duration: 150ms; --duration-slow: 200ms; --ease: ease; --transition: var(--duration) var(--ease); /* Stacking */ --z-raised: 2; --z-popover: 100; --z-sidebar: 150; --z-nav: 200; --z-tooltip: 300; /* Layout */ --nav-height: 60px; --bottom-nav-height: 60px; --app-sidebar-width: 220px; --app-shell-transition: var(--duration-slow) var(--ease); /* Range grid cell */ --cell-size: 44px; --cell-gap: 2px; --cell-header-size: 26px; --cell-label-size: 9px; --cell-note-size: 8px; /* the hover percentage inside a cascade cell */ /* ── 2. Semantic (light) ───────────────────────────────────────────────── */ /* Brand */ --brand: var(--green-500); --brand-hover: var(--green-600); --brand-strong: var(--green-700); /* brand-coloured small text: AA on white */ --brand-dim: color-mix(in srgb, var(--brand) 15%, transparent); --brand-glow: color-mix(in srgb, var(--brand) 25%, transparent); --text-on-brand: var(--white); /* Surfaces */ --bg-page: var(--gray-100); --bg-surface: var(--white); --bg-surface-2: var(--gray-50); --bg-surface-3: var(--gray-200); --bg-nav: var(--white); /* Text */ --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-400); --text-inverse: var(--white); /* Borders */ --border: var(--gray-200); --border-strong: var(--gray-300); /* Third-party sign-in button (Google's guidelines: white button, dark text) */ --oauth-button-bg: var(--white); --oauth-button-text: var(--gray-900); /* Focus */ --focus-ring: color-mix(in srgb, var(--brand) 55%, transparent); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --shadow-up: 0 -2px 8px rgba(0,0,0,0.08); /* bars pinned to the bottom */ --scrim: color-mix(in srgb, var(--black) 40%, transparent); /* behind a modal */ /* Status. Each has a foreground; tints are mixed from it, so a status only ever needs one value per theme. */ --success: var(--emerald-600); --warning: var(--amber-700); --danger: var(--red-600); --info: var(--blue-600); --success-bg: color-mix(in srgb, var(--success) 12%, transparent); --warning-bg: color-mix(in srgb, var(--warning) 12%, transparent); --danger-bg: color-mix(in srgb, var(--danger) 10%, transparent); --info-bg: color-mix(in srgb, var(--info) 10%, transparent); --success-border: color-mix(in srgb, var(--success) 40%, transparent); --warning-border: color-mix(in srgb, var(--warning) 40%, transparent); --danger-border: color-mix(in srgb, var(--danger) 40%, transparent); --info-border: color-mix(in srgb, var(--info) 40%, transparent); /* Poker actions. Fixed across themes: they are data, and a range must read the same in light and dark. Each has an on-colour for text drawn on it. */ --action-fold: var(--blue-500); --action-call: var(--emerald-500); --action-raise-1: var(--red-300); --action-raise-2: var(--red-400); --action-raise-3: var(--red-500); --action-raise-4: var(--red-600); --action-raise-5: var(--red-700); --action-allin: var(--red-900); --on-action: var(--white); --on-action-light: var(--gray-900); /* raise-1 and raise-2 are too pale for white */ --action-selected: var(--white); --action-selected-ring: rgba(255,255,255,0.4); --action-selected-light: var(--gray-600); --action-selected-ring-light: rgba(0,0,0,0.25); /* Range grid */ --cell-empty: var(--bg-surface-3); --cell-label-on-fill: rgba(255,255,255,0.9); --cell-label-shadow: 0 1px 2px rgba(0,0,0,0.6); --cell-hover-border: rgba(255,255,255,0.5); --range-fill: var(--action-raise-3); /* single-action played fraction */ /* ── 3. Domain: the trainer ────────────────────────────────────────────── */ /* Landing page (home.css): felt under a lamp on the left, chips drifting through it, the four suits faint on the right. */ --home-lamp: color-mix(in srgb, var(--green-300) 55%, transparent); --home-felt-edge: var(--green-800); --home-chip: color-mix(in srgb, var(--white) 22%, transparent); --home-chip-deep: color-mix(in srgb, var(--green-900) 35%, transparent); --home-suits: color-mix(in srgb, var(--white) 2.5%, transparent); --home-seam-glow: color-mix(in srgb, var(--brand) 18%, transparent); /* Provenance — how much a number can be trusted. Same order as the cascade model's confidence ranking; a modelled range must never look measured. */ --prov-measured: var(--success); --prov-interpolated: var(--brand-strong); --prov-extrapolated: var(--warning); --prov-modelled: var(--danger); /* Hand-strength rank bands (cascade combo_sort bands, strongest first) */ --strength-1: var(--red-700); --strength-2: var(--red-500); --strength-3: var(--red-300); --strength-4: var(--emerald-500); /* Decision grades for hand review, best to worst */ --grade-best: var(--brand); --grade-good: var(--emerald-500); --grade-inaccuracy: var(--amber-600); --grade-mistake: var(--orange-500); --grade-blunder: var(--red-600); /* Expected value and equity */ --ev-positive: var(--success); --ev-negative: var(--danger); --ev-neutral: var(--text-muted); --equity-hero: var(--brand); --equity-villain: var(--gray-500); --equity-tie: var(--gray-300); /* Seats */ --seat-hero: var(--brand); --seat-cpu: var(--gray-500); --seat-to-act: var(--amber-600); --seat-winner: var(--ev-positive); --seat-folded-opacity: 0.45; /* Table. --felt-color, --cushion-color and --card-back-color (below) are the colours a player may choose: a colour picker only has to set them, on or any ancestor of the table, and every shade of the felt, the cushion and the backs follows. The cushion is the padded bumper round the felt; the rail colour is the seat plates' and chips', and stays dark. */ --felt-color: var(--green-700); --felt-base: var(--felt-color); /* kept deep: see @supports below */ --table-felt: var(--felt-base); --table-felt-edge: color-mix(in oklab, var(--felt-base), var(--black) 25%); --table-felt-mark: color-mix(in oklab, var(--felt-base), var(--white) 9%); --cushion-color: var(--leather-600); --table-cushion: var(--cushion-color); --table-cushion-light: color-mix(in oklab, var(--cushion-color), var(--white) 16%); --table-cushion-dark: color-mix(in oklab, var(--cushion-color), var(--black) 35%); --table-rail: var(--ink-900); --table-line: color-mix(in srgb, var(--white) 18%, transparent); --table-text: var(--white); /* Chips, by value in big blinds (the big blind as a $1 chip, so a stack looks the same at any blinds; utils/table_view.py, chip_columns). Each value has a face colour and edge spots; the side is the face, darker. Bets and the pot are chips with the amount beside them in white with a dark outline, no plate. */ --chip-1: var(--gray-50); --chip-1-spots: var(--blue-600); --chip-5: var(--red-600); --chip-25: var(--emerald-600); --chip-100: var(--gray-900); --chip-500: var(--orange-500); --chip-spots: color-mix(in srgb, var(--white) 92%, transparent); --chip-edge: color-mix(in srgb, var(--black) 30%, transparent); --chip-outline: color-mix(in srgb, var(--ink-900) 85%, transparent); /* The choices behind the table-colour menu, --choice--; the keys are utils/table_colours.py's, and static/js/table-colours.js sets a part's base colour to one of these (or to a custom colour). */ --choice-felt-green: var(--green-700); --choice-felt-blue: var(--felt-blue-700); --choice-felt-teal: var(--felt-teal-700); --choice-felt-red: var(--felt-red-700); --choice-felt-purple: var(--felt-purple-700); --choice-felt-grey: var(--felt-grey-700); --choice-cushion-brown: var(--leather-600); --choice-cushion-tan: var(--leather-tan); --choice-cushion-black: var(--leather-black); --choice-cushion-oxblood: var(--leather-oxblood); --choice-cushion-navy: var(--leather-navy); --choice-cushion-cream: var(--leather-cream); --choice-back-green: var(--green-700); --choice-back-red: var(--back-red-700); --choice-back-blue: var(--back-blue-700); --choice-back-black: var(--back-black); --choice-back-purple: var(--back-purple-700); --choice-back-gold: var(--back-gold-700); --choice-suit-black: var(--gray-900); --choice-suit-red: var(--red-600); --choice-suit-blue: var(--blue-600); --choice-suit-green: var(--emerald-600); --choice-suit-purple: var(--purple-600); --choice-suit-orange: var(--orange-600); /* The custom-colour swatch before a custom colour is picked: a colour wheel. */ --choice-wheel: conic-gradient(in oklch longer hue, oklch(0.62 0.17 30), oklch(0.62 0.17 30)); /* Cards. Four-colour deck by default — the standard for study, where a flush draw has to be readable at a glance. [data-deck="2"] restores the classic red/black deck. */ --card-face: var(--white); /* The hero's cards after they fold: still face up, muted by colour, not by transparency (two faded cards overlapping would show darker where they overlap). Grey face, grey ink for every suit. */ --card-face-folded: var(--gray-400); --card-border-folded: var(--gray-500); --card-ink-folded: var(--gray-700); --card-border: var(--gray-300); --card-back-color: var(--green-700); --card-back-base: var(--card-back-color); /* kept deep: see @supports below */ --card-back: var(--card-back-base); --card-back-pattern: color-mix(in oklab, var(--card-back-base), var(--white) 10%); --card-back-mark: color-mix(in oklab, var(--card-back-base), var(--white) 30%); --card-back-mark-soft: color-mix(in oklab, var(--card-back-base), var(--white) 18%); /* Suit inks: ---color is the player's pick (table colours, below), the --suit-* the cards use is that pick kept dark enough to read on a white card. */ --spade-color: var(--gray-900); --heart-color: var(--red-600); --diamond-color: var(--blue-600); --club-color: var(--emerald-600); --suit-spade: var(--spade-color); --suit-heart: var(--heart-color); --suit-diamond: var(--diamond-color); --suit-club: var(--club-color); } /* A custom table colour can be anything. The felt carries white text, the backs a lighter shield and the suits sit on a white card, so a pale pick is darkened until those still read; the choices are all deeper than this already, so they pass through unchanged. */ @supports (color: oklch(from red l c h)) { :root { --felt-base: oklch(from var(--felt-color) min(l, 0.52) c h); --card-back-base: oklch(from var(--card-back-color) min(l, 0.6) c h); --suit-spade: oklch(from var(--spade-color) min(l, 0.66) c h); --suit-heart: oklch(from var(--heart-color) min(l, 0.66) c h); --suit-diamond: oklch(from var(--diamond-color) min(l, 0.66) c h); --suit-club: oklch(from var(--club-color) min(l, 0.66) c h); } } [data-deck="2"] { --diamond-color: var(--red-600); --club-color: var(--gray-900); } /* ── Dark theme: tier 2 only (plus the few tier-3 values that are not derived) ── */ [data-theme="dark"] { color-scheme: dark; --brand-strong: var(--green-400); --bg-page: var(--ink-950); --bg-surface: var(--ink-900); --bg-surface-2: var(--ink-850); --bg-surface-3: var(--ink-800); --bg-nav: var(--ink-900); --text-primary: var(--gray-50); --text-secondary: var(--gray-400); --text-muted: var(--gray-600); --text-inverse: var(--gray-900); --border: var(--ink-800); --border-strong: var(--gray-700); --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 24px rgba(0,0,0,0.5); --shadow-up: 0 -2px 8px rgba(0,0,0,0.3); --scrim: color-mix(in srgb, var(--black) 60%, transparent); --success: var(--emerald-400); --warning: var(--amber-400); --danger: var(--red-400); --info: var(--blue-400); --cell-hover-border: rgba(255,255,255,0.4); --equity-villain: var(--gray-400); --equity-tie: var(--gray-600); --seat-cpu: var(--gray-400); --seat-to-act: var(--amber-400); --card-border: var(--gray-400); }