/* tokens.css — Wushu Scoring design tokens. * * Single source of truth for color, type, space, radius, shadow, motion. * Mirrored from docs/design/tokens.md. Update both together. * * Base colourways switched by `data-theme` on : * :root — Paper (light, default) * [data-theme=dark] — Lacquer Night * [data-theme=wong] — Wong (CVD-safe judging panel palette) * * A high-contrast overlay is also available via `data-mode="judging"` * on the same element. It stacks on top of any base theme and replaces * structural tokens with the same Wong palette as the `wong` colourway, * so the live judging panel always reads as CVD-safe regardless of * which stylised theme the org runs day-to-day. * * Colour-blind-friendly semantic axis (Okabe-Ito): * --color-positive-* — vivid blue, used for start / approve / success / valid / * primary CTA / info. * --color-negative-* — vivid vermillion orange, used for stop / reject / error / * invalid / warning. * Role accents (--color-role-*) stay in their original hues — they identify * roles, not actions, so they're orthogonal to the positive/negative axis. * Brand colours (--color-brand-red, --color-brand-gold) are preserved for * identity / logo chrome only — they are NOT semantic indicators. * * Legacy aliases (--red / --paper / --ink / --rule / --muted / --serif / --sans) * are kept so existing pages keep working while they migrate. The --red alias * still resolves to brand-red and must only be used for brand chrome — for * semantic danger / stop, use --color-danger-strong (which resolves to negative). */ :root { /* Brand */ --color-brand-red: #C0392B; --color-brand-red-hover: #A8311F; --color-brand-gold: #B8860B; --color-brand-ink: #1A1410; /* Mark-pop — the accent dot / micro-mark used when an icon sits inside a * brand-coloured square (app-icon style). Flips per theme: gold-on-red for * red themes, deep-red-on-gold for gold/ochre themes, so the seal moment of * contrast always reads. */ --color-mark-pop: #B8860B; /* Surface */ --color-surface-paper: #FAF8F4; --color-surface-card: #FFFFFF; --color-surface-sunken: #F0EDE8; --color-surface-raised: #F5F4F0; --color-surface-rule: #E0D8CC; --color-surface-rule-strong: #D3D1C7; /* Text */ --color-text-primary: #1A1410; --color-text-secondary: #6B6058; --color-text-muted: #6D6C66; --color-text-on-accent: #FFFFFF; --color-text-on-danger: #FFFFFF; --color-text-link: var(--color-positive-strong); /* Positive / negative semantic primitives (Okabe-Ito) */ --color-positive-strong: #0072B2; --color-positive-hover: #005C8F; --color-positive-soft-bg: #DCEEF7; --color-positive-soft-border: #7FB6D9; --color-positive-soft-text: #003E63; /* Vermillion darkened from Okabe-Ito #D55E00 → #B14E00 so it passes WCAG AA * (~5.2:1) on the Paper surface. Dark and Ink themes redefine these per their * own contrast budget below. */ --color-negative-strong: #B14E00; --color-negative-hover: #8F3E00; --color-negative-soft-bg: #FBE7D5; --color-negative-soft-border: #E5A368; --color-negative-soft-text: #6E2F00; /* Action — primary CTA = positive */ --color-action-primary: var(--color-positive-strong); --color-action-primary-hover: var(--color-positive-hover); --color-action-subtle-bg: var(--color-positive-soft-bg); --color-action-subtle-fg: var(--color-positive-soft-text); --color-focus-ring: rgba(0, 114, 178, 0.32); /* Status — strong / soft-bg / soft-border / soft-text. All map onto the * positive/negative axis: success = positive (blue), danger / warning = * negative (orange). The legacy four-token shape is kept so existing pages * keep working. */ --color-success-strong: var(--color-positive-strong); --color-success-soft-bg: var(--color-positive-soft-bg); --color-success-soft-border: var(--color-positive-soft-border); --color-success-soft-text: var(--color-positive-soft-text); --color-warning-strong: var(--color-negative-strong); --color-warning-soft-bg: var(--color-negative-soft-bg); --color-warning-soft-border: var(--color-negative-soft-border); --color-warning-soft-text: var(--color-negative-soft-text); --color-danger-strong: var(--color-negative-strong); --color-danger-soft-bg: var(--color-negative-soft-bg); --color-danger-soft-border: var(--color-negative-soft-border); --color-danger-soft-text: var(--color-negative-soft-text); --color-info-strong: var(--color-positive-strong); --color-info-soft-bg: var(--color-positive-soft-bg); --color-info-soft-border: var(--color-positive-soft-border); --color-info-soft-text: var(--color-positive-soft-text); --color-neutral-strong: #5F5E5A; --color-neutral-soft-bg: #F1EFE8; --color-neutral-soft-border: #B4B2A9; --color-neutral-soft-text: #5F5E5A; /* Role accents — identification only, NOT action semantics */ --color-role-ahj: #D85A30; --color-role-dd: #185FA5; --color-role-op: #1D9E75; --color-role-qom: #7A4FB8; --color-role-hj: #C0392B; --color-role-quick: #5F5E5A; /* Type families */ --font-serif: 'DM Serif Display', Georgia, serif; --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'DM Mono', 'SF Mono', 'Fira Mono', ui-monospace, monospace; --font-display: 'Bebas Neue', Impact, sans-serif; /* Type sizes */ --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-md: 17px; --font-size-lg: 20px; --font-size-xl: 24px; --font-size-2xl: 32px; --font-size-3xl: clamp(28px, 4vw, 42px); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-tracking-tight: -0.01em; --font-tracking-normal: 0; --font-tracking-wide: 0.04em; --font-tracking-caps: 0.08em; /* Spacing — 4px grid */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12); --shadow-focus: 0 0 0 3px var(--color-focus-ring); /* Motion */ --motion-quick: 120ms; --motion-standard: 200ms; --motion-slow: 360ms; --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1); --motion-ease-enter: cubic-bezier(0, 0, 0.2, 1); --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* ── Legacy aliases — keep until every page is migrated. * --red resolves to brand-red and is ONLY for brand chrome (logo dot, * notification badge). For semantic danger / stop, use * --color-danger-strong instead. ── */ --red: var(--color-brand-red); --gold: var(--color-brand-gold); --ink: var(--color-brand-ink); --paper: var(--color-surface-paper); --muted: var(--color-text-muted); --rule: var(--color-surface-rule); --serif: var(--font-serif); --sans: var(--font-sans); } [data-theme="dark"] { --color-brand-red: #E15A4B; --color-brand-red-hover: #EC7264; --color-brand-gold: #D4A53D; --color-brand-ink: #E2DDD5; --color-surface-paper: #0D1B33; --color-surface-card: #111E36; --color-surface-sunken: #152644; --color-surface-raised: #192C50; --color-surface-rule: #1C2D45; --color-surface-rule-strong: #2A3D5C; --color-text-primary: #E2DDD5; --color-text-secondary: #8B95A1; --color-text-muted: #8C94A0; --color-text-on-accent: #0A0E14; --color-text-on-danger: #0A0E14; --color-text-link: var(--color-positive-strong); /* Lighter Okabe-Ito for legibility on dark backgrounds */ --color-positive-strong: #4FB3E5; --color-positive-hover: #6FC3EF; --color-positive-soft-bg: #142F45; --color-positive-soft-border: #2D5778; --color-positive-soft-text: #A8D8F0; --color-negative-strong: #FF8534; --color-negative-hover: #FF9A55; --color-negative-soft-bg: #3A2410; --color-negative-soft-border: #7A4A22; --color-negative-soft-text: #FBA670; --color-action-primary: var(--color-positive-strong); --color-action-primary-hover: var(--color-positive-hover); --color-action-subtle-bg: var(--color-positive-soft-bg); --color-action-subtle-fg: var(--color-positive-soft-text); --color-focus-ring: rgba(79, 179, 229, 0.45); --color-success-soft-bg: var(--color-positive-soft-bg); --color-success-soft-text: var(--color-positive-soft-text); --color-warning-soft-bg: var(--color-negative-soft-bg); --color-warning-soft-text: var(--color-negative-soft-text); --color-danger-soft-bg: var(--color-negative-soft-bg); --color-danger-soft-text: var(--color-negative-soft-text); --color-info-soft-bg: var(--color-positive-soft-bg); --color-info-soft-text: var(--color-positive-soft-text); --color-neutral-soft-bg: #1C2D45; --color-neutral-soft-text: #B4B2A9; --color-role-ahj: #E37352; --color-role-dd: #3E83C8; --color-role-op: #4FBC95; --color-role-qom: #9C75D9; --color-role-hj: #E15A4B; --color-role-quick: #8B95A1; --color-mark-pop: #D4A53D; } /* Wong — high-contrast, CVD-safe judging panel palette. * * Pure-white page + cool off-white card, ink-black structure, cobalt * for primary action, Wong-orange for brand presence, teal/amber/ * crimson/violet for status + role differentiation. Holds across * protanopia / deuteranopia / tritanopia. * * This is the same palette applied by the `data-mode="judging"` * overlay further down — picking `wong` as your base theme is * functionally "always-on judging mode". The overlay exists so other * ceremonial / character themes can adopt it during live scoring * without giving up their identity on dashboards and nav. */ [data-theme="wong"] { /* Brand — both red and gold slots collapse to Wong orange so * wordmarks, 1st-place numerals, and any element pulling from * either brand slot read as the same single colour. */ --color-brand-red: #DE7C29; --color-brand-red-hover: #B86220; --color-brand-gold: #DE7C29; --color-brand-ink: #0A0E14; --color-surface-paper: #FFFFFF; --color-surface-card: #F4F5F8; --color-surface-sunken: #DCE7F9; --color-surface-raised: #FFFFFF; --color-surface-rule: #B0B6C2; --color-surface-rule-strong: #0A0E14; --color-text-primary: #0A0E14; --color-text-secondary: #2A3140; --color-text-muted: #4D5566; --color-text-on-accent: #FFFFFF; --color-text-on-danger: #FFFFFF; --color-text-link: #0F4FC8; --color-positive-strong: #0F4FC8; --color-positive-hover: #0A3FA0; --color-positive-soft-bg: #DCE7F9; --color-positive-soft-border: #0F4FC8; --color-positive-soft-text: #0A3FA0; --color-negative-strong: #B62A1A; --color-negative-hover: #8E1F12; --color-negative-soft-bg: #F8D7CF; --color-negative-soft-border: #B62A1A; --color-negative-soft-text: #6E1A10; --color-action-primary: #0F4FC8; --color-action-primary-hover: #0A3FA0; --color-action-subtle-bg: #DCE7F9; --color-action-subtle-fg: #0A3FA0; --color-focus-ring: rgba(15,79,200,0.65); /* Status — Wong CVD-safe pairs. Teal for success (not green: * compresses with red-orange under CVD). Deep amber for warning, * deep red-orange for danger, cobalt for info. */ --color-success-strong: #0A6E5A; --color-success-soft-bg: #D8EDE5; --color-success-soft-border: #0A6E5A; --color-success-soft-text: #07432F; --color-warning-strong: #A85C00; --color-warning-soft-bg: #FDEACB; --color-warning-soft-border: #A85C00; --color-warning-soft-text: #5C3000; --color-danger-strong: #B62A1A; --color-danger-soft-bg: #F8D7CF; --color-danger-soft-border: #B62A1A; --color-danger-soft-text: #6E1A10; --color-info-strong: #0F4FC8; --color-info-soft-bg: #DCE7F9; --color-info-soft-border: #0F4FC8; --color-info-soft-text: #0A3FA0; --color-neutral-strong: #2A3140; --color-neutral-soft-bg: #EAECF1; --color-neutral-soft-border: #4D5566; --color-neutral-soft-text: #2A3140; /* Role accents — Wong palette. Five mutually-distinct hues that * survive P/D/T. AHJ takes orange (loudest), HJ takes crimson * (final authority); DD/OP/QoM fan out across cobalt/teal/violet. */ --color-role-ahj: #DE7C29; --color-role-dd: #0F4FC8; --color-role-op: #0A6E5A; --color-role-qom: #6840C9; --color-role-hj: #B62A1A; --color-role-quick: #4D5566; --color-mark-pop: #FFFFFF; } /* ─────────────────────────────────────────────────────────────────────────── * Traditional colour themes (Vermilion / Onyx / Ivory) * * These three themes are ceremonial/stylistic skins, not colour-blind-safe * variants. They swap brand-red → gold and pin surface-paper to the page * background tone (lacquer red / charcoal / cream). The existing SealMark * (red rect + paper character) therefore renders as a gold square with red / * black / cream character without any per-component changes. * * For the positive/negative semantic axis we keep the same family hues from * the parent palette but warm them so they sit comfortably on the new * surfaces — they still resolve to "blue-ish vs orange-ish" but cohere with * the gold-on-red / gold-on-charcoal aesthetic. Users who need maximum * colour-blindness safety should pick Paper / Lacquer Night / Sun. * ─────────────────────────────────────────────────────────────────────── */ /* Vermilion — Red & Gold. Lacquer-red surfaces, gold accents, cream type. */ [data-theme="vermilion"] { --color-brand-red: #E8B547; --color-brand-red-hover: #F3C766; --color-brand-gold: #E8B547; --color-brand-ink: #F6E7C0; --color-surface-paper: #5C1410; --color-surface-card: #6E1B14; --color-surface-sunken: #4A0E0B; --color-surface-raised: #7A2018; --color-surface-rule: #8B3A2C; --color-surface-rule-strong: #B57A48; --color-text-primary: #F6E7C0; --color-text-secondary: #D6B97D; --color-text-muted: #C1A97C; --color-text-on-accent: #5C1410; --color-text-on-danger: #5C1410; --color-text-link: #F3C766; --color-positive-strong: #F3C766; --color-positive-hover: #F6E7C0; --color-positive-soft-bg: #7A2018; --color-positive-soft-border: #B57A48; --color-positive-soft-text: #F6E7C0; --color-negative-strong: #F1A089; --color-negative-hover: #F8C0B0; --color-negative-soft-bg: #8B3A2C; --color-negative-soft-border: #D6B97D; --color-negative-soft-text: #F8E0D2; --color-action-primary: #E8B547; --color-action-primary-hover: #F3C766; --color-action-subtle-bg: #7A2018; --color-action-subtle-fg: #F6E7C0; --color-focus-ring: rgba(232,181,71,0.45); --color-success-strong: var(--color-positive-strong); --color-success-soft-bg: var(--color-positive-soft-bg); --color-success-soft-border: var(--color-positive-soft-border); --color-success-soft-text: var(--color-positive-soft-text); --color-warning-strong: var(--color-negative-strong); --color-warning-soft-bg: var(--color-negative-soft-bg); --color-warning-soft-border: var(--color-negative-soft-border); --color-warning-soft-text: var(--color-negative-soft-text); --color-danger-strong: var(--color-negative-strong); --color-danger-soft-bg: var(--color-negative-soft-bg); --color-danger-soft-border: var(--color-negative-soft-border); --color-danger-soft-text: var(--color-negative-soft-text); --color-info-strong: var(--color-positive-strong); --color-info-soft-bg: var(--color-positive-soft-bg); --color-info-soft-border: var(--color-positive-soft-border); --color-info-soft-text: var(--color-positive-soft-text); --color-neutral-strong: #D6B97D; --color-neutral-soft-bg: #4A0E0B; --color-neutral-soft-border: #8B3A2C; --color-neutral-soft-text: #D6B97D; --color-role-ahj: #E8B547; --color-role-dd: #F3C766; --color-role-op: #E8B547; --color-role-qom: #F6E7C0; --color-role-hj: #E8B547; --color-role-quick: #B0925A; /* On gold, a deep lacquer red reads as a classic seal pop. */ --color-mark-pop: #8B1A0E; } /* Onyx — Black & Gold. Charcoal surfaces, warm gold marks. */ [data-theme="onyx"] { --color-brand-red: #D4A53D; --color-brand-red-hover: #E5B95A; --color-brand-gold: #D4A53D; --color-brand-ink: #F1DBA5; --color-surface-paper: #0E0C08; --color-surface-card: #1A1610; --color-surface-sunken: #060503; --color-surface-raised: #221C12; --color-surface-rule: #3A2F1C; --color-surface-rule-strong: #6B5836; --color-text-primary: #F1DBA5; --color-text-secondary: #B89A5E; --color-text-muted: #9B8148; --color-text-on-accent: #0E0C08; --color-text-on-danger: #0E0C08; --color-text-link: #E5B95A; --color-positive-strong: #E5B95A; --color-positive-hover: #F1DBA5; --color-positive-soft-bg: #221C12; --color-positive-soft-border: #6B5836; --color-positive-soft-text: #F1DBA5; --color-negative-strong: #E8A07A; --color-negative-hover: #F1BFA0; --color-negative-soft-bg: #2E1D14; --color-negative-soft-border: #87703F; --color-negative-soft-text: #F8D2B8; --color-action-primary: #D4A53D; --color-action-primary-hover: #E5B95A; --color-action-subtle-bg: #221C12; --color-action-subtle-fg: #F1DBA5; --color-focus-ring: rgba(212,165,61,0.45); --color-success-strong: var(--color-positive-strong); --color-success-soft-bg: var(--color-positive-soft-bg); --color-success-soft-border: var(--color-positive-soft-border); --color-success-soft-text: var(--color-positive-soft-text); --color-warning-strong: var(--color-negative-strong); --color-warning-soft-bg: var(--color-negative-soft-bg); --color-warning-soft-border: var(--color-negative-soft-border); --color-warning-soft-text: var(--color-negative-soft-text); --color-danger-strong: var(--color-negative-strong); --color-danger-soft-bg: var(--color-negative-soft-bg); --color-danger-soft-border: var(--color-negative-soft-border); --color-danger-soft-text: var(--color-negative-soft-text); --color-info-strong: var(--color-positive-strong); --color-info-soft-bg: var(--color-positive-soft-bg); --color-info-soft-border: var(--color-positive-soft-border); --color-info-soft-text: var(--color-positive-soft-text); --color-neutral-strong: #B89A5E; --color-neutral-soft-bg: #1A1610; --color-neutral-soft-border: #3A2F1C; --color-neutral-soft-text: #B89A5E; --color-role-ahj: #D4A53D; --color-role-dd: #E5B95A; --color-role-op: #D4A53D; --color-role-qom: #F1DBA5; --color-role-hj: #D4A53D; --color-role-quick: #87703F; --color-mark-pop: #C0392B; } /* Ivory — White & Gold. Warm cream surfaces, deep ochre marks. */ [data-theme="ivory"] { --color-brand-red: #8B6A0A; --color-brand-red-hover: #6F5408; --color-brand-gold: #8B6A0A; --color-brand-ink: #14100B; --color-surface-paper: #FAF4E0; --color-surface-card: #FFFFFF; --color-surface-sunken: #F0E6C8; --color-surface-raised: #FCF6E4; --color-surface-rule: #D4B26A; --color-surface-rule-strong: #A88758; --color-text-primary: #14100B; --color-text-secondary: #5B4520; --color-text-muted: #79653B; --color-text-on-accent: #FAF4E0; --color-text-on-danger: #FFFFFF; --color-text-link: #6F5408; --color-positive-strong: #6F5408; --color-positive-hover: #4A3805; --color-positive-soft-bg: #F0E6C8; --color-positive-soft-border: #A88758; --color-positive-soft-text: #4A3805; --color-negative-strong: #8B1A0E; --color-negative-hover: #6A1209; --color-negative-soft-bg: #F4D4C8; --color-negative-soft-border: #C77860; --color-negative-soft-text: #5A1A0E; --color-action-primary: #8B6A0A; --color-action-primary-hover: #6F5408; --color-action-subtle-bg: #F0E6C8; --color-action-subtle-fg: #6F5408; --color-focus-ring: rgba(139,106,10,0.32); --color-success-strong: var(--color-positive-strong); --color-success-soft-bg: var(--color-positive-soft-bg); --color-success-soft-border: var(--color-positive-soft-border); --color-success-soft-text: var(--color-positive-soft-text); --color-warning-strong: var(--color-negative-strong); --color-warning-soft-bg: var(--color-negative-soft-bg); --color-warning-soft-border: var(--color-negative-soft-border); --color-warning-soft-text: var(--color-negative-soft-text); --color-danger-strong: var(--color-negative-strong); --color-danger-soft-bg: var(--color-negative-soft-bg); --color-danger-soft-border: var(--color-negative-soft-border); --color-danger-soft-text: var(--color-negative-soft-text); --color-info-strong: var(--color-positive-strong); --color-info-soft-bg: var(--color-positive-soft-bg); --color-info-soft-border: var(--color-positive-soft-border); --color-info-soft-text: var(--color-positive-soft-text); --color-neutral-strong: #5B4520; --color-neutral-soft-bg: #F0E6C8; --color-neutral-soft-border: #A88758; --color-neutral-soft-text: #5B4520; --color-role-ahj: #B8860B; --color-role-dd: #6F5408; --color-role-op: #8B6A0A; --color-role-qom: #5B4520; --color-role-hj: #8B6A0A; --color-role-quick: #8B7444; --color-mark-pop: #8B1A0E; } /* ═══════════════════════════════════════════════════════════════ * Judging mode — high-contrast CVD-safe overlay * ─────────────────────────────────────────────────────────────── * Stacks on top of any base theme. Activate by setting * data-mode="judging" on (same element that carries * data-theme). The attribute selector wins on equal specificity * by source order, so this block MUST come after all * [data-theme="…"] declarations above. * * Same Wong palette as [data-theme="wong"] but applied as an * override, so a user running Vermilion / Onyx / Ivory or any * of the character colourways can flip on the judging panel * while keeping their stylised theme on dashboards and nav. * ═══════════════════════════════════════════════════════════════ */ [data-mode="judging"] { --color-brand-red: #DE7C29; --color-brand-red-hover: #B86220; --color-brand-gold: #DE7C29; --color-brand-ink: #0A0E14; --color-mark-pop: #FFFFFF; --color-surface-paper: #FFFFFF; --color-surface-card: #F4F5F8; --color-surface-sunken: #DCE7F9; --color-surface-raised: #FFFFFF; --color-surface-rule: #B0B6C2; --color-surface-rule-strong: #0A0E14; --color-text-primary: #0A0E14; --color-text-secondary: #2A3140; --color-text-muted: #4D5566; --color-text-on-accent: #FFFFFF; --color-text-on-danger: #FFFFFF; --color-text-link: #0F4FC8; --color-action-primary: #0F4FC8; --color-action-primary-hover: #0A3FA0; --color-action-subtle-bg: #DCE7F9; --color-action-subtle-fg: #0A3FA0; --color-focus-ring: rgba(15,79,200,0.65); --color-success-strong: #0A6E5A; --color-success-soft-bg: #D8EDE5; --color-success-soft-border: #0A6E5A; --color-success-soft-text: #07432F; --color-warning-strong: #A85C00; --color-warning-soft-bg: #FDEACB; --color-warning-soft-border: #A85C00; --color-warning-soft-text: #5C3000; --color-danger-strong: #B62A1A; --color-danger-soft-bg: #F8D7CF; --color-danger-soft-border: #B62A1A; --color-danger-soft-text: #6E1A10; --color-info-strong: #0F4FC8; --color-info-soft-bg: #DCE7F9; --color-info-soft-border: #0F4FC8; --color-info-soft-text: #0A3FA0; --color-neutral-strong: #2A3140; --color-neutral-soft-bg: #EAECF1; --color-neutral-soft-border: #4D5566; --color-neutral-soft-text: #2A3140; --color-role-ahj: #DE7C29; --color-role-dd: #0F4FC8; --color-role-op: #0A6E5A; --color-role-qom: #6840C9; --color-role-hj: #B62A1A; --color-role-quick: #4D5566; } /* ═══════════════════════════════════════════════════════════════ * Judging mode (DARK) — high-contrast CVD-safe overlay for night * arenas / low-light venues. Wong palette inverted onto a deep-navy * surface stack. Same orange↔cobalt CVD-safe pairing as the light * judging overlay, with teal/amber/crimson/violet status + roles, * all lightened for legibility on dark. * * Activate by setting data-mode="judging-dark" on (same * element that carries data-theme / data-mode="judging"). MUST come * AFTER both the [data-theme] blocks and the light [data-mode="judging"] * block so it wins on equal specificity by source order. * ═══════════════════════════════════════════════════════════════ */ [data-mode="judging-dark"] { --color-brand-red: #F0A04B; --color-brand-red-hover: #F4B36B; --color-brand-gold: #F0A04B; --color-brand-ink: #F2F5FA; --color-mark-pop: #0B1220; --color-surface-paper: #0B1220; --color-surface-card: #141E32; --color-surface-sunken: #1C2A46; --color-surface-raised: #18223A; --color-surface-rule: #2C3A54; --color-surface-rule-strong: #5A6A85; --color-text-primary: #F2F5FA; --color-text-secondary: #C4CCDA; --color-text-muted: #8B96AA; --color-text-on-accent: #08101F; --color-text-on-danger: #08101F; --color-text-link: #6FA8FF; --color-action-primary: #4E92F2; --color-action-primary-hover: #6BA6FF; --color-action-subtle-bg: #1E2C48; --color-action-subtle-fg: #AFCBFF; --color-focus-ring: rgba(78,146,242,0.6); --color-success-strong: #2BB39E; --color-success-soft-bg: #11302C; --color-success-soft-border: #2BB39E; --color-success-soft-text: #7FD8C6; --color-warning-strong: #E0A23A; --color-warning-soft-bg: #352608; --color-warning-soft-border: #E0A23A; --color-warning-soft-text: #F0C879; --color-danger-strong: #E76A52; --color-danger-soft-bg: #3A1812; --color-danger-soft-border: #E76A52; --color-danger-soft-text: #F2A593; --color-info-strong: #4E92F2; --color-info-soft-bg: #1E2C48; --color-info-soft-border: #4E92F2; --color-info-soft-text: #AFCBFF; --color-neutral-strong: #C4CCDA; --color-neutral-soft-bg: #1C2A46; --color-neutral-soft-border: #8B96AA; --color-neutral-soft-text: #C4CCDA; --color-role-ahj: #F0A04B; --color-role-dd: #4E92F2; --color-role-op: #2BB39E; --color-role-qom: #B79CFF; --color-role-hj: #E76A52; --color-role-quick: #8B96AA; }