/* JUST ORACLE AI · design tokens (Hallmark: atmospheric · night-pitch) Generated by scripts/gen_tokens.py — edit the OKLCH values there, not by hand, so the hex fallback block below always matches. */ :root { --color-paper-deep: oklch(13% 0.018 165); /* deepest canvas (modal backdrop, bottom bar) */ --color-paper: oklch(17% 0.02 165); /* card surface */ --color-paper-2: oklch(21% 0.022 165); /* inset block inside a card */ --color-paper-3: oklch(26% 0.022 165); /* chips, pills, hover */ --color-rule: oklch(33% 0.02 165); /* hairlines */ --color-rule-2: oklch(42% 0.018 165); /* stronger hairline, hover border */ --color-ink: oklch(95% 0.012 95); /* primary text */ --color-ink-2: oklch(82% 0.014 120); /* secondary text */ --color-muted: oklch(67% 0.016 150); /* meta text, labels */ --color-accent: oklch(85% 0.15 88); /* floodlight gold: the one accent */ --color-accent-ink: oklch(22% 0.04 85); /* text on accent */ --color-accent-bg: oklch(28% 0.05 88); /* accent tint surface */ --color-live: oklch(69% 0.2 27); /* live match signal (reserved) */ --color-live-bg: oklch(25% 0.07 27); --color-good: oklch(78% 0.16 152); /* status: pass / win (reserved) */ --color-good-bg: oklch(26% 0.05 152); --color-bad: oklch(70% 0.17 15); /* status: fail / loss (reserved) */ --color-bad-bg: oklch(26% 0.06 15); --color-home: oklch(76% 0.1 230); /* data series: home side */ --color-home-soft: oklch(48% 0.06 230); /* home series, de-emphasised (e.g. today's unfinished bar) */ --color-away: oklch(74% 0.15 50); /* data series: away side */ --color-draw: oklch(60% 0.012 150); /* data series: draw / neutral */ --color-line: oklch(70% 0.18 150); /* LINE brand (outline button only) */ --color-pitch-top: oklch(25.7% 0.047 159); /* stadium canvas gradient (same stops as pitch.css) */ --color-pitch-mid: oklch(22.1% 0.036 163); --color-pitch-low: oklch(17.1% 0.024 165); --color-paper-glass: oklch(17% 0.02 165 / 0.86); --color-scrim: oklch(8% 0.015 165 / 0.78); --color-bloom-a: oklch(85% 0.06 88 / 0.1); --color-bloom-b: oklch(85% 0.06 88 / 0.08); --color-stripe: oklch(97% 0.01 120 / 0.02); --font-display: "Chakra Petch", "IBM Plex Sans Thai", system-ui, sans-serif; --font-body: "IBM Plex Sans Thai", system-ui, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace; /* code only: API keys, IPs */ --text-xs: 0.75rem; /* 12px labels */ --text-sm: 0.875rem; /* 14px meta, chips */ --text-base: 1rem; /* 16px body */ --text-lg: 1.25rem; /* 20px team names */ --text-xl: 1.75rem; /* 28px score */ --text-display: clamp(2rem, 5vw + 1rem, 3.25rem); --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --radius-card: 14px; --radius-inset: 10px; --radius-pill: 999px; --rule-hair: 1px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --z-base: 1; --z-raised: 10; --z-sticky: 200; --z-bar: 300; --z-modal: 400; } /* Light theme: only the admin pages switch to it (html[data-theme="light"]) */ [data-theme="light"] { --color-paper-deep: oklch(94% 0.01 140); --color-paper: oklch(98.5% 0.006 100); --color-paper-2: oklch(95.5% 0.01 120); --color-paper-3: oklch(91% 0.012 140); --color-rule: oklch(86% 0.012 150); --color-rule-2: oklch(74% 0.014 150); --color-ink: oklch(22% 0.02 160); --color-ink-2: oklch(36% 0.018 160); --color-muted: oklch(48% 0.016 155); --color-accent: oklch(52% 0.12 75); --color-accent-ink: oklch(99% 0.008 95); --color-accent-bg: oklch(95.5% 0.04 88); --color-live: oklch(52% 0.19 27); --color-live-bg: oklch(95% 0.035 27); --color-good: oklch(47% 0.12 152); --color-good-bg: oklch(95% 0.04 152); --color-bad: oklch(51% 0.17 15); --color-bad-bg: oklch(95% 0.03 15); --color-home: oklch(54% 0.11 235); --color-home-soft: oklch(78% 0.05 235); --color-away: oklch(62% 0.15 50); --color-draw: oklch(72% 0.012 150); --color-line: oklch(48% 0.14 150); --color-paper-glass: oklch(98.5% 0.006 100 / 0.88); --color-scrim: oklch(20% 0.015 165 / 0.45); } /* Older WebViews (e.g. some in-app browsers) without oklch(): same colours in hex */ @supports not (color: oklch(50% 0.1 100)) { :root { --color-paper-deep: #020906; --color-paper: #07120d; --color-paper-2: #0e1c16; --color-paper-3: #1a2721; --color-rule: #2c3933; --color-rule-2: #44504b; --color-ink: #f1efe6; --color-ink-2: #c3c6bc; --color-muted: #8f9890; --color-accent: #f7c747; --color-accent-ink: #231903; --color-accent-bg: #332707; --color-live: #ff5c53; --color-live-bg: #3d110e; --color-good: #59d483; --color-good-bg: #0e2b18; --color-bad: #f56b7c; --color-bad-bg: #3c161a; --color-home: #68bde4; --color-home-soft: #376479; --color-away: #f58b4b; --color-draw: #7b827c; --color-line: #28bc5e; --color-pitch-top: #0b2a1b; --color-pitch-mid: #082016; --color-pitch-low: #05130d; --color-paper-glass: rgba(7, 18, 13, 0.86); --color-scrim: rgba(0, 2, 1, 0.78); --color-bloom-a: rgba(222, 204, 161, 0.1); --color-bloom-b: rgba(222, 204, 161, 0.08); --color-stripe: rgba(244, 246, 239, 0.02); } [data-theme="light"] { --color-paper-deep: #e8ede7; --color-paper: #fbfaf6; --color-paper-2: #eff1ea; --color-paper-3: #dde3dc; --color-rule: #ccd3cd; --color-rule-2: #a5ada6; --color-ink: #121e17; --color-ink-2: #35403a; --color-muted: #57605a; --color-accent: #905d00; --color-accent-ink: #fdfcf6; --color-accent-bg: #fbefd2; --color-live: #be2323; --color-live-bg: #ffe6e2; --color-good: #0a6d37; --color-good-bg: #dcf7e2; --color-bad: #b22b46; --color-bad-bg: #ffe7e8; --color-home: #1178a5; --color-home-soft: #99bdd3; --color-away: #cb6620; --color-draw: #a0a7a1; --color-line: #00722e; --color-paper-glass: rgba(251, 250, 246, 0.88); --color-scrim: rgba(16, 24, 20, 0.45); } }