/* ============================================================
Cyber Armor Systems — Brand Tokens
assets.cyberarmorsystems.com/css/cas-tokens.css
------------------------------------------------------------
THE REQUIRED BASE. Every other cas-*.css component file is
structure only and references the tokens defined here — link
this first, then only the components you need:
...or link cas-brand.css for the full bundle.
Contrast ratios in the comments are MEASURED and enforced by
scripts/check-contrast.js in CI. If you change a colour, run
`npm run check:contrast` — the numbers are assertions, not decoration.
============================================================ */
:root {
/* Primary palette */
--cas-navy: #002f54;
--cas-gold: #f59b00;
--cas-mid-blue: #324a6e;
--cas-teal: #0c7b93;
/* Derived / utility */
--cas-navy-dark: #001e36;
--cas-navy-light: #1a4a70;
--cas-gold-light: #fdb94b;
--cas-gold-dark: #c07800;
--cas-white: #ffffff;
--cas-off-white: #f5f8fc;
--cas-text-muted: #aec6e8;
/* Semantic tokens */
--cas-color-primary: var(--cas-navy);
--cas-color-accent: var(--cas-gold);
--cas-color-secondary: var(--cas-mid-blue);
--cas-color-info: var(--cas-teal);
/* Typography
--cas-font-body requires cas-fonts.css to be linked BEFORE this file. */
--cas-font-heading: 'Arial Black', Arial, sans-serif;
--cas-font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
--cas-font-mono: 'Courier New', Courier, monospace;
/* Type scale */
--cas-text-display: 64px;
--cas-text-h1: 48px;
--cas-text-h2: 36px;
--cas-text-h3: 28px;
--cas-text-h4: 22px;
--cas-text-h5: 18px;
--cas-text-lead: 20px;
--cas-text-body-lg: 18px; /* preferred body default */
--cas-text-body: 16px; /* body minimum */
--cas-text-caption: 14px; /* Inter at 14px: weight 500+ only */
--cas-text-label: 12px; /* heading font only — never Inter */
/* Line height / measure */
--cas-lh-tight: 1.1;
--cas-lh-heading: 1.3;
--cas-lh-body: 1.75; /* never below 1.6 */
--cas-measure: 65ch;
/* Spacing scale — 8px grid, named by value. Never use arbitrary px. */
--cas-space-4: 4px;
--cas-space-8: 8px;
--cas-space-12: 12px;
--cas-space-16: 16px;
--cas-space-24: 24px;
--cas-space-32: 32px;
--cas-space-48: 48px;
--cas-space-64: 64px;
--cas-space-96: 96px;
/* Deprecated spacing aliases — retained so existing consumers keep working. */
--cas-space-xs: var(--cas-space-4);
--cas-space-sm: var(--cas-space-8);
--cas-space-md: var(--cas-space-16);
--cas-space-lg: var(--cas-space-32);
--cas-space-xl: var(--cas-space-64);
/* Border radius */
--cas-radius-sm: 4px;
--cas-radius-md: 8px;
--cas-radius-lg: 16px;
/* Shadows */
--cas-shadow-sm: 0 1px 3px rgba(0,47,84,0.2);
--cas-shadow-md: 0 4px 16px rgba(0,47,84,0.25);
--cas-shadow-lg: 0 8px 32px rgba(0,47,84,0.35);
}
/* ── Light-mode theme tokens (default) ──────────────────────── */
/* Scheme B "Navy Authority": the page is off-white and CARDS ARE */
/* WHITE, so surfaces lift toward the reader. Gold is spent only */
/* on the CTA fill and the focus ring — never on body text. */
/* Ratios are measured against --cas-theme-bg (off-white). */
:root,
[data-theme="light"] {
--cas-theme-bg: var(--cas-off-white); /* #f5f8fc — page */
--cas-theme-surface: var(--cas-white); /* #ffffff — raised card */
--cas-theme-text: var(--cas-navy); /* #002f54 — 12.85:1 AAA */
--cas-theme-text-body: var(--cas-mid-blue); /* #324a6e — 8.42:1 AAA */
--cas-theme-text-muted: rgba(0, 47, 84, 0.66); /* -> #53738d — 4.67:1 AA */
--cas-theme-accent: var(--cas-gold); /* #f59b00 — CTA FILL only, never a ring */
--cas-theme-accent-alt: var(--cas-gold-dark); /* #c07800 — 3.54:1 on white: large text only */
/* Focus ring is gold-DARK here, not gold: outline-offset puts page/card colour
on both sides of the ring, and gold is only 2.06:1 on the page. Gold-dark
clears page (3.33) and card (3.54). */
--cas-theme-focus: var(--cas-gold-dark);
/* The white-on-off-white surface step is only 1.07:1, so the border —
not the fill — is what makes a card read as raised. Do not thin it. */
--cas-theme-border: rgba(0, 47, 84, 0.22); /* -> #c7d1d9 — 1.55:1 vs card */
/* Links — teal at rest (standalone: no underline; inline: underline). */
--cas-theme-link: var(--cas-teal); /* #0c7b93 — 4.62:1 */
--cas-theme-link-hover: var(--cas-navy); /* 12.85:1 */
--cas-theme-link-visited: var(--cas-mid-blue); /* 8.42:1 */
/* Alert accents (left border on the surface — non-text, needs 3:1). */
--cas-alert-warn: #a56700; /* vs off-white 4.34 / white higher — border only */
--cas-alert-crit: #c0392b; /* vs off-white 5.11 */
--cas-alert-ok: #157347; /* vs off-white 5.51 */
--cas-alert-info: var(--cas-navy); /* vs off-white 12.85 */
/* Inputs (filled + bottom rule). */
--cas-input-bg: #eef2f7; /* filled field ground on the light page */
--cas-input-border: #5f7a99; /* -> vs input bg 3.95 (non-text 3:1) */
}
/* ── Dark-mode theme tokens ─────────────────────────────────── */
/* The page drops to navy-dark, freeing navy for cards; headings go WHITE */
/* so gold reads as an event. Ratios measured against --cas-theme-bg. */
[data-theme="dark"] {
--cas-theme-bg: var(--cas-navy-dark); /* #001e36 — page */
--cas-theme-surface: var(--cas-navy); /* #002f54 — raised card */
--cas-theme-text: var(--cas-white); /* #ffffff — 16.95:1 AAA */
--cas-theme-text-body: var(--cas-text-muted); /* #aec6e8 — 9.72:1 AAA */
--cas-theme-text-muted: rgba(174, 198, 232, 0.72); /* -> #7d9cbf — 5.63:1 AA */
--cas-theme-accent: var(--cas-gold-light); /* #fdb94b — 9.86:1 AAA */
--cas-theme-accent-alt: var(--cas-gold); /* #f59b00 — 7.72:1 AAA */
--cas-theme-focus: var(--cas-gold-light);
--cas-theme-border: rgba(174, 198, 232, 0.22); /* -> #265075 — 1.62:1 vs card */
--cas-theme-link: var(--cas-gold-light); /* #fdb94b — 9.86:1 */
--cas-theme-link-hover: var(--cas-white); /* 16.95:1 */
--cas-theme-link-visited: var(--cas-gold); /* 7.72:1 */
--cas-alert-warn: #f59b00; /* vs navy-dark 7.72 / navy 6.24 — border only */
--cas-alert-crit: #e06666; /* vs navy-dark 5.05 / navy 4.08 */
--cas-alert-ok: #34c77b; /* vs navy-dark 7.75 / navy 6.26 */
--cas-alert-info: #4a9ec7; /* vs navy-dark 5.66 / navy 4.57 */
--cas-input-bg: #001325; /* filled field ground on the dark page */
--cas-input-border: #7d9cbf; /* -> vs input bg 6.59 (non-text 3:1) */
}
/* Mirror of [data-theme="dark"] for users with no explicit choice.
ANY change above must be repeated here, or system-dark users silently
diverge from explicit-dark users. The contrast gate asserts they match. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--cas-theme-bg: var(--cas-navy-dark);
--cas-theme-surface: var(--cas-navy);
--cas-theme-text: var(--cas-white);
--cas-theme-text-body: var(--cas-text-muted);
--cas-theme-text-muted: rgba(174, 198, 232, 0.72);
--cas-theme-accent: var(--cas-gold-light);
--cas-theme-accent-alt: var(--cas-gold);
--cas-theme-focus: var(--cas-gold-light);
--cas-theme-border: rgba(174, 198, 232, 0.22);
--cas-theme-link: var(--cas-gold-light);
--cas-theme-link-hover: var(--cas-white);
--cas-theme-link-visited: var(--cas-gold);
--cas-alert-warn: #f59b00;
--cas-alert-crit: #e06666;
--cas-alert-ok: #34c77b;
--cas-alert-info: #4a9ec7;
--cas-input-bg: #001325;
--cas-input-border: #7d9cbf;
}
}