/* ============================================================================= * Judging page tokens * * Theme-aware values are defined in :root (dark — default behaviour) and * redefined under [data-theme="light"] on . Theme switching is just an * attribute flip; future Breakdance toggle wires into the same hook. * * Brand / status / tooltip values stay constant across themes. * Stage 2a (tokenisation) — values map 1:1 to the previous hardcoded colours * in dark mode. Light values are best-effort defaults; refined when we * actually flip and test. * ============================================================================= */ :root { /* Brand — constant across themes */ --ccr-color-brand: #4E00FF; --ccr-color-brand-soft: #c5b5fb; --ccr-color-brand-deep: #59008e; /* State — constant across themes */ --ccr-color-danger: #f85c5c; /* Annotation type stripe colours — constant across themes. Used as the * 3px left edge on each annotation row to encode type at a glance. */ --ccr-type-warning: #f5a623; --ccr-type-legality: #3b82f6; --ccr-type-deduction: #f85c5c; --ccr-type-comment: #94a3b8; /* Status / notice — constant across themes */ --ccr-error-bg: #f8d7da; --ccr-error-text: #721c24; --ccr-error-border: #f5c6cb; /* Tooltip — constant across themes */ --ccr-tooltip-bg: rgba(0, 0, 0, 0.75); /* Floating comments (legacy, may be dead) */ --ccr-surface-floating-bg: #f6f6f6; --ccr-border-floating: #c7c7c7; /* Text on coloured/dark surfaces — constant across themes */ --ccr-text-on-action: #ffffff; /* Theme-aware: dark (default) */ --ccr-text-strong: #ffffff; --ccr-text-muted: #ffffffcc; --ccr-text-faint: #ffffffaa; --ccr-text-disabled: #ffffff61; --ccr-surface-2: #ffffff11; --ccr-surface-3: #ffffff22; --ccr-surface-4: #ffffff33; --ccr-surface-input: #2b2b2b; --ccr-surface-input-dark: #00000055; --ccr-surface-button-cancel: #000000; --ccr-surface-inverse: #ffffff; --ccr-border-faint: #ffffff22; --ccr-border-soft: #ffffff33; --ccr-border-tab: #ffffff44; --ccr-border: #ffffff55; --ccr-border-strong: #ffffff; --ccr-border-input: #565656; --ccr-overlay-hover: #ffffff55; --ccr-marker-range-bg: #ffffff85; } [data-theme="light"] { --ccr-text-strong: #1c1c1e; --ccr-text-muted: #2c2c2e; --ccr-text-faint: #6c6c70; --ccr-text-disabled: #c4c4c6; --ccr-surface-2: #00000005; --ccr-surface-3: #0000000d; --ccr-surface-4: #00000018; --ccr-surface-input: #ffffff; --ccr-surface-input-dark: #00000018; --ccr-surface-button-cancel: #2c2c2e; --ccr-surface-inverse: #1c1c1e; --ccr-border-faint: #0000001a; --ccr-border-soft: #00000026; --ccr-border-tab: #00000033; --ccr-border: #00000040; --ccr-border-strong: #1c1c1e; --ccr-border-input: #c4c4c6; --ccr-overlay-hover: #00000018; --ccr-marker-range-bg: #00000060; } /* Backwards-compat aliases — referenced by the