/* ============================================================================ ROGUE AI — DESIGN TOKENS GENERATED by export/build-tokens.mjs on 2026-08-19. Do not hand-edit: edit the generator and re-run, or the JSON artefacts will drift from this file again. Every ratio in a comment below was computed, not typed. Standards CSS: custom properties + cascade layers. No Tailwind, no utility classes, no framework, no build step. tier 1 --rogue-* primitive. Ground-invariant. Never named by a component. tier 2 --color-* semantic. Rebound per ground. The only tier a component may name. tier 3 ---* component. Aliases tier 2 only. Declared in components.css. Ground is an attribute, not a media query and not a class: dark — brand default light — legal, financial, printed, signed
a light body inside a hybrid document ============================================================================ */ @layer tokens, base, components, utilities; @layer tokens { /* ------------------------------------------------------------- tier 1 ---- */ :root { /* neutral-d */ --rogue-color-neutral-d-1: #0A0E17; --rogue-color-neutral-d-2: #0E1420; --rogue-color-neutral-d-3: #111827; --rogue-color-neutral-d-4: #161E2E; --rogue-color-neutral-d-5: #1A2332; --rogue-color-neutral-d-6: #222D3D; --rogue-color-neutral-d-7: #2C3849; --rogue-color-neutral-d-8: #3C4A5E; --rogue-color-neutral-d-9: #68778E; --rogue-color-neutral-d-10: #7C8BA1; --rogue-color-neutral-d-11: #94A3B8; --rogue-color-neutral-d-12: #FFFFFF; /* neutral-l */ --rogue-color-neutral-l-1: #FFFFFF; --rogue-color-neutral-l-2: #F7F9FB; --rogue-color-neutral-l-3: #EEF2F6; --rogue-color-neutral-l-4: #E4EAF0; --rogue-color-neutral-l-5: #D8E0E9; --rogue-color-neutral-l-6: #C8D3DE; --rogue-color-neutral-l-7: #B3C0CF; --rogue-color-neutral-l-8: #94A3B8; --rogue-color-neutral-l-9: #76859B; --rogue-color-neutral-l-10: #5C6A7E; --rogue-color-neutral-l-11: #33404F; --rogue-color-neutral-l-12: #0B1220; /* accent-d */ --rogue-color-accent-d-1: #061019; --rogue-color-accent-d-2: #08182A; --rogue-color-accent-d-3: #0B2740; --rogue-color-accent-d-4: #0E3355; --rogue-color-accent-d-5: #114069; --rogue-color-accent-d-6: #175184; --rogue-color-accent-d-7: #1E67A6; --rogue-color-accent-d-8: #2686CE; --rogue-color-accent-d-9: #33A1FD; --rogue-color-accent-d-10: #56B3FE; --rogue-color-accent-d-11: #8FCCFF; --rogue-color-accent-d-12: #D8EDFF; /* accent-l */ --rogue-color-accent-l-1: #F5FAFF; --rogue-color-accent-l-2: #E8F4FF; --rogue-color-accent-l-3: #D3EAFF; --rogue-color-accent-l-4: #BBDDFF; --rogue-color-accent-l-5: #9ECDFA; --rogue-color-accent-l-6: #79B8F3; --rogue-color-accent-l-7: #4FA3EA; --rogue-color-accent-l-8: #2B8AD9; --rogue-color-accent-l-9: #1478BD; --rogue-color-accent-l-10: #0D6EAE; --rogue-color-accent-l-11: #0A5D95; --rogue-color-accent-l-12: #062F4D; --rogue-status-d-success-surface: #0C2417; --rogue-status-d-success-border: #1B5A34; --rogue-status-d-success-solid: #4FE39B; --rogue-status-d-success-text: #6EE7A8; --rogue-status-d-warning-surface: #2A1F06; --rogue-status-d-warning-border: #6B4E10; --rogue-status-d-warning-solid: #F0B429; --rogue-status-d-warning-text: #FBD37A; --rogue-status-d-danger-surface: #2A0F12; --rogue-status-d-danger-border: #6B2229; --rogue-status-d-danger-solid: #F26E72; --rogue-status-d-danger-text: #FCA5A8; --rogue-status-d-info-surface: #0B2740; --rogue-status-d-info-border: #175184; --rogue-status-d-info-solid: #33A1FD; --rogue-status-d-info-text: #8FCCFF; --rogue-status-l-success-surface: #ECFDF3; --rogue-status-l-success-border: #A6E7C3; --rogue-status-l-success-solid: #067647; --rogue-status-l-success-text: #05603A; --rogue-status-l-warning-surface: #FFF8E6; --rogue-status-l-warning-border: #F5D98A; --rogue-status-l-warning-solid: #9A6500; --rogue-status-l-warning-text: #7A4F00; --rogue-status-l-danger-surface: #FEF1F2; --rogue-status-l-danger-border: #F3B4B8; --rogue-status-l-danger-solid: #8E1610; --rogue-status-l-danger-text: #9F1D14; --rogue-status-l-info-surface: #EFF8FF; --rogue-status-l-info-border: #B0D8F8; --rogue-status-l-info-solid: #1478BD; --rogue-status-l-info-text: #0A5D95; /* categorical series — active slots 1,2,3,5,6. See cvd-report.json. */ --rogue-viz-d-1: #4C88D3; --rogue-viz-d-2: #EF8448; --rogue-viz-d-3: #5DC0A7; --rogue-viz-d-5: #B66C87; --rogue-viz-d-6: #9FDF8B; --rogue-viz-l-1: #225ECB; --rogue-viz-l-2: #D06829; --rogue-viz-l-3: #35A191; --rogue-viz-l-5: #904C6D; --rogue-viz-l-6: #2E5A02; --rogue-viz-seq-100: #CDE2FB; --rogue-viz-seq-250: #86B6EF; --rogue-viz-seq-400: #3D82D8; --rogue-viz-seq-600: #184F95; --rogue-viz-seq-700: #0D366B; --rogue-viz-status-d-good: #4FE39B; --rogue-viz-status-d-warning: #F0B429; --rogue-viz-status-d-serious: #B85A2E; --rogue-viz-status-d-critical: #F26E72; --rogue-viz-status-l-good: #067647; --rogue-viz-status-l-warning: #9A6500; --rogue-viz-status-l-serious: #D96A1F; --rogue-viz-status-l-critical: #8E1610; --rogue-color-scrim-d: rgb(2 4 8 / .62); --rogue-color-scrim-l: rgb(11 18 32 / .42); --rogue-space-0: 0; --rogue-space-1: 2px; --rogue-space-2: 4px; --rogue-space-3: 8px; --rogue-space-4: 12px; --rogue-space-5: 16px; --rogue-space-6: 24px; --rogue-space-7: 32px; --rogue-space-8: 48px; --rogue-space-9: 64px; --rogue-space-10: 96px; --rogue-radius-0: 0; --rogue-radius-1: 4px; --rogue-radius-2: 6px; --rogue-radius-3: 10px; --rogue-radius-4: 9999px; --rogue-duration-instant: 0ms; --rogue-duration-enter: 160ms; --rogue-duration-exit: 120ms; --rogue-duration-slow: 280ms; --rogue-ease-standard: cubic-bezier(.2,0,0,1); --rogue-ease-decel: cubic-bezier(0,0,0,1); --rogue-ease-accel: cubic-bezier(.3,0,1,1); --rogue-border-hairline: 1px; --rogue-border-rule: 2px; --rogue-border-heavy: 3px; --rogue-font-weight-400: 400; --rogue-font-weight-500: 500; --rogue-font-weight-600: 600; --rogue-font-weight-700: 700; } /* ------------------------------------------ tier 2 — DARK GROUND ---- */ :root { --color-page: var(--rogue-color-neutral-d-1); --color-surface: var(--rogue-color-neutral-d-3); --color-surface-raised: var(--rogue-color-neutral-d-5); --color-surface-sunken: var(--rogue-color-neutral-d-2); --color-surface-overlay: var(--rogue-color-neutral-d-4); --color-border-subtle: var(--rogue-color-neutral-d-6); --color-border: var(--rogue-color-neutral-d-7); --color-border-strong: var(--rogue-color-neutral-d-8); --color-border-control: var(--rogue-color-neutral-d-9); /* 4.24:1 passes 3:1 — border-control vs page */ --color-separator: var(--rogue-color-neutral-d-7); --color-scrim: var(--rogue-color-scrim-d); --color-text: var(--rogue-color-neutral-d-12); /* 19.3:1 passes 4.5:1 — text on page */ --color-text-secondary: var(--rogue-color-neutral-d-11); /* 7.53:1 passes 4.5:1 — text-secondary on page */ --color-text-muted: var(--rogue-color-neutral-d-10); /* 5.57:1 passes 4.5:1 — text-muted on page */ --color-text-on-solid: var(--rogue-color-neutral-d-1); /* 7.04:1 passes 4.5:1 — text-on-solid over accent-solid */ --color-text-link: var(--rogue-color-accent-d-11); /* 11.26:1 passes 4.5:1 — text-link on page */ --color-text-disabled: var(--rogue-color-neutral-d-8); --color-accent-subtle: var(--rogue-color-accent-d-2); --color-accent-surface: var(--rogue-color-accent-d-3); --color-accent-border: var(--rogue-color-accent-d-6); --color-accent-solid: var(--rogue-color-accent-d-9); /* 7.04:1 passes 3:1 — accent-solid vs page */ --color-accent-solid-hover: var(--rogue-color-accent-d-10); --color-accent-text: var(--rogue-color-accent-d-11); --color-focus-ring: var(--rogue-color-accent-d-10); /* 8.52:1 passes 3:1 — focus-ring vs page */ --color-success-surface: var(--rogue-status-d-success-surface); --color-success-border: var(--rogue-status-d-success-border); --color-success-solid: var(--rogue-status-d-success-solid); --color-success-text: var(--rogue-status-d-success-text); --color-success-on-solid: var(--rogue-color-neutral-d-1); --color-warning-surface: var(--rogue-status-d-warning-surface); --color-warning-border: var(--rogue-status-d-warning-border); --color-warning-solid: var(--rogue-status-d-warning-solid); --color-warning-text: var(--rogue-status-d-warning-text); --color-warning-on-solid: var(--rogue-color-neutral-d-1); --color-danger-surface: var(--rogue-status-d-danger-surface); --color-danger-border: var(--rogue-status-d-danger-border); --color-danger-solid: var(--rogue-status-d-danger-solid); --color-danger-text: var(--rogue-status-d-danger-text); --color-danger-on-solid: var(--rogue-color-neutral-d-1); --color-info-surface: var(--rogue-status-d-info-surface); --color-info-border: var(--rogue-status-d-info-border); --color-info-solid: var(--rogue-status-d-info-solid); --color-info-text: var(--rogue-status-d-info-text); --color-info-on-solid: var(--rogue-color-neutral-d-1); --viz-surface: var(--rogue-color-neutral-d-3); --viz-grid: var(--rogue-color-neutral-d-6); --viz-axis: var(--rogue-color-neutral-d-8); --viz-ink: var(--rogue-color-neutral-d-12); --viz-ink-muted: var(--rogue-color-neutral-d-10); --viz-series-1: var(--rogue-viz-d-1); --viz-series-2: var(--rogue-viz-d-2); --viz-series-3: var(--rogue-viz-d-3); --viz-series-5: var(--rogue-viz-d-5); --viz-series-6: var(--rogue-viz-d-6); --viz-deemphasis: var(--rogue-color-neutral-d-8); --viz-series-4: var(--rogue-color-neutral-d-8); /* RETIRED 2026-08-19 — resolves to --viz-deemphasis. See viz-migration.json. */ --viz-series-7: var(--rogue-color-neutral-d-8); /* RETIRED 2026-08-19 — resolves to --viz-deemphasis. See viz-migration.json. */ --viz-series-8: var(--rogue-color-neutral-d-8); /* RETIRED 2026-08-19 — resolves to --viz-deemphasis. See viz-migration.json. */ --viz-status-good: var(--rogue-viz-status-d-good); --viz-status-warning: var(--rogue-viz-status-d-warning); --viz-status-serious: var(--rogue-viz-status-d-serious); --viz-status-critical: var(--rogue-viz-status-d-critical); --viz-seq-100: var(--rogue-viz-seq-100); --viz-seq-250: var(--rogue-viz-seq-250); --viz-seq-400: var(--rogue-viz-seq-400); --viz-seq-600: var(--rogue-viz-seq-600); --viz-seq-700: var(--rogue-viz-seq-700); --viz-diverge-neg: var(--rogue-viz-d-2); --viz-diverge-mid: var(--rogue-color-neutral-d-7); --viz-diverge-pos: var(--rogue-viz-d-1); --shadow-raised: none; /* dark ground uses border contrast; a shadow on near-black is invisible */ --shadow-overlay: 0 16px 48px rgb(0 0 0 / .55); --shadow-focus: 0 0 0 3px rgb(86 179 254 / .35); } /* ------------------------------------------ tier 2 — LIGHT GROUND ---- */ [data-ground="light"] { --color-page: var(--rogue-color-neutral-l-1); --color-surface: var(--rogue-color-neutral-l-1); --color-surface-raised: var(--rogue-color-neutral-l-1); --color-surface-sunken: var(--rogue-color-neutral-l-2); --color-surface-overlay: var(--rogue-color-neutral-l-1); --color-border-subtle: var(--rogue-color-neutral-l-5); --color-border: var(--rogue-color-neutral-l-7); --color-border-strong: var(--rogue-color-neutral-l-10); --color-border-control: var(--rogue-color-neutral-l-9); /* 3.75:1 passes 3:1 — border-control vs page */ --color-separator: var(--rogue-color-neutral-l-6); --color-scrim: var(--rogue-color-scrim-l); --color-text: var(--rogue-color-neutral-l-12); /* 18.72:1 passes 4.5:1 — text on page */ --color-text-secondary: var(--rogue-color-neutral-l-11); /* 10.57:1 passes 4.5:1 — text-secondary on page */ --color-text-muted: var(--rogue-color-neutral-l-10); /* 5.5:1 passes 4.5:1 — text-muted on page */ --color-text-on-solid: var(--rogue-color-neutral-l-1); /* 4.72:1 passes 4.5:1 — text-on-solid over accent-solid */ --color-text-link: var(--rogue-color-accent-l-11); /* 6.97:1 passes 4.5:1 — text-link on page */ --color-text-disabled: var(--rogue-color-neutral-l-8); --color-accent-subtle: var(--rogue-color-accent-l-1); --color-accent-surface: var(--rogue-color-accent-l-2); --color-accent-border: var(--rogue-color-accent-l-5); --color-accent-solid: var(--rogue-color-accent-l-9); /* 4.72:1 passes 3:1 — accent-solid vs page */ --color-accent-solid-hover: var(--rogue-color-accent-l-10); --color-accent-text: var(--rogue-color-accent-l-11); --color-focus-ring: var(--rogue-color-accent-l-8); /* 3.66:1 passes 3:1 — focus-ring vs page */ --color-success-surface: var(--rogue-status-l-success-surface); --color-success-border: var(--rogue-status-l-success-border); --color-success-solid: var(--rogue-status-l-success-solid); --color-success-text: var(--rogue-status-l-success-text); --color-success-on-solid: var(--rogue-color-neutral-l-1); --color-warning-surface: var(--rogue-status-l-warning-surface); --color-warning-border: var(--rogue-status-l-warning-border); --color-warning-solid: var(--rogue-status-l-warning-solid); --color-warning-text: var(--rogue-status-l-warning-text); --color-warning-on-solid: var(--rogue-color-neutral-l-1); --color-danger-surface: var(--rogue-status-l-danger-surface); --color-danger-border: var(--rogue-status-l-danger-border); --color-danger-solid: var(--rogue-status-l-danger-solid); --color-danger-text: var(--rogue-status-l-danger-text); --color-danger-on-solid: var(--rogue-color-neutral-l-1); --color-info-surface: var(--rogue-status-l-info-surface); --color-info-border: var(--rogue-status-l-info-border); --color-info-solid: var(--rogue-status-l-info-solid); --color-info-text: var(--rogue-status-l-info-text); --color-info-on-solid: var(--rogue-color-neutral-l-1); --viz-surface: var(--rogue-color-neutral-l-1); --viz-grid: var(--rogue-color-neutral-l-4); --viz-axis: var(--rogue-color-neutral-l-7); --viz-ink: var(--rogue-color-neutral-l-12); --viz-ink-muted: var(--rogue-color-neutral-l-10); --viz-series-1: var(--rogue-viz-l-1); --viz-series-2: var(--rogue-viz-l-2); --viz-series-3: var(--rogue-viz-l-3); --viz-series-5: var(--rogue-viz-l-5); --viz-series-6: var(--rogue-viz-l-6); --viz-deemphasis: var(--rogue-color-neutral-l-6); --viz-series-4: var(--rogue-color-neutral-l-6); /* RETIRED 2026-08-19 — resolves to --viz-deemphasis. See viz-migration.json. */ --viz-series-7: var(--rogue-color-neutral-l-6); /* RETIRED 2026-08-19 — resolves to --viz-deemphasis. See viz-migration.json. */ --viz-series-8: var(--rogue-color-neutral-l-6); /* RETIRED 2026-08-19 — resolves to --viz-deemphasis. See viz-migration.json. */ --viz-status-good: var(--rogue-viz-status-l-good); --viz-status-warning: var(--rogue-viz-status-l-warning); --viz-status-serious: var(--rogue-viz-status-l-serious); --viz-status-critical: var(--rogue-viz-status-l-critical); --viz-seq-100: var(--rogue-viz-seq-100); --viz-seq-250: var(--rogue-viz-seq-250); --viz-seq-400: var(--rogue-viz-seq-400); --viz-seq-600: var(--rogue-viz-seq-600); --viz-seq-700: var(--rogue-viz-seq-700); --viz-diverge-neg: var(--rogue-viz-l-2); --viz-diverge-mid: var(--rogue-color-neutral-l-4); --viz-diverge-pos: var(--rogue-viz-l-1); --shadow-raised: 0 1px 2px rgb(11 18 32 / .06); --shadow-overlay: 0 12px 32px rgb(11 18 32 / .12); --shadow-focus: 0 0 0 3px rgb(43 138 217 / .30); } /* --------------------------------- tier 2 — non-colour axes, ground-agnostic */ :root { --spacing-inline: var(--rogue-space-3); --spacing-stack: var(--rogue-space-4); --spacing-gutter: var(--rogue-space-6); --spacing-section: var(--rogue-space-8); --radius-sharp: var(--rogue-radius-0); --radius-control: var(--rogue-radius-2); --radius-card: var(--rogue-radius-3); --radius-pill: var(--rogue-radius-4); --font-ui: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --font-numeric: var(--font-ui); --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-weight-regular: var(--rogue-font-weight-400); --font-weight-medium: var(--rogue-font-weight-500); --font-weight-semibold: var(--rogue-font-weight-600); --font-weight-bold: var(--rogue-font-weight-700); --text-caption: clamp(.75rem, .72rem + .1vw, .8125rem); --text-body: clamp(.875rem, .85rem + .12vw, .9375rem); --text-body-lg: clamp(1rem, .96rem + .18vw, 1.0625rem); --text-heading-sm: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); --text-heading: clamp(1.375rem, 1.25rem + .6vw, 1.75rem); --text-heading-lg: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); --text-hero: clamp(2.5rem, 1.9rem + 3.2vw, 4.5rem); --text-doc-fine: 8pt; --text-doc-caption: 9pt; --text-doc-body: 11.5pt; --text-doc-lead: 13pt; --text-doc-h3: 12pt; --text-doc-h2: 14pt; --text-doc-h1: 20pt; --text-doc-title: 30pt; --leading-tight: 1.15; --leading-snug: 1.3; --leading-body: 1.5; --leading-loose: 1.65; --tracking-tight: -.02em; --tracking-normal: 0; --tracking-wide: .06em; --tracking-caps: .12em; --duration-instant: var(--rogue-duration-instant); --duration-enter: var(--rogue-duration-enter); --duration-exit: var(--rogue-duration-exit); --duration-slow: var(--rogue-duration-slow); --ease-standard: var(--rogue-ease-standard); --ease-decel: var(--rogue-ease-decel); --ease-accel: var(--rogue-ease-accel); } @media (prefers-reduced-motion: reduce) { :root { --duration-enter: 0ms; --duration-exit: 0ms; --duration-slow: 0ms; } } /* ---------------------------------------------------------------- aliases -- BRAND-CONTEXT.md §5.2 named five short roles. They resolve to the canonical role set so existing references keep working. Not for new code. */ :root, [data-ground="light"] { --surface: var(--color-surface); --surface-raised: var(--color-surface-raised); --on-surface: var(--color-text); --accent: var(--color-accent-solid); --on-accent: var(--color-text-on-solid); --border: var(--color-border); } } /* @layer tokens */