/* ============================================================ GENERATED FILE. DO NOT EDIT BY HAND. Generated from brand/brand-tokens.css + tools/brand/site-tokens.css by tools/brand/gen-brand-tokens.sh. Edit the site extensions or get an updated brand handoff, then re-run the script. Themes (data-theme on ): default / "current" / "orange" Canonical Black/Orange "alt" / "blue" French Blue Ink "paper" Paper ============================================================ */ /* The CISO Crucible — Brand Tokens v1.1 Canonical (Black/Orange) default; data-theme="alt" = French Blue Ink; data-theme="paper" = Paper. v1.1: #E38F4E retired — single orange #E25822. */ :root, :root[data-theme="current"], :root[data-theme="orange"] { --bg: #0B0B0B; --bg-elev: #161616; --text: #F5F1E6; --text-mute: #BFBFBF; --text-soft: #8A8A8A; --brand: #E25822; --brand-deep: #B8431A; --brand-soft: #F2A07A; --display: #EDE6D2; --pure: #FFFFFF; --speckle: #C9913A; --rule: #2A2A2A; } :root[data-theme="alt"], :root[data-theme="blue"] { --bg: #FFFFFE; --bg-elev: #EDF3FF; --text: #0F1733; --text-mute: #4F5A7A; --text-soft: #6E7DA8; --brand: #2A4FB3; --brand-deep: #1A3580; --brand-soft: #A9C4FF; --display: #0F1733; --pure: #0F1733; --speckle: #A9C4FF; --rule: #DDE5F5; } :root[data-theme="paper"] { --bg: #FFFFFF; --bg-elev: #FAF6F0; --text: #1B2430; --text-mute: #3A4655; --text-soft: #5C6775; --brand: #E25822; --brand-deep: #B8431A; --brand-soft: #F3E9DC; --display: #1B2430; --pure: #1B2430; --speckle: #C9A27A; --rule: #D7DCE3; --rule-soft: #E7EBF0; --on-brand: #0B0B0B; --on-brand-hover: #FFFFFF; --wash-1: #F3E9DC; --wash-2: #FAF6F0; --wash-3: #FFFFFF; --band: #1B2430; --band-text: #DFE4EA; --band-label: #C9A27A; color-scheme: light; } /* Type — theme-agnostic */ :root { --font-display: "Bebas Neue", "Oswald", "Anton", Impact, sans-serif; --font-sans: "Inter", "PT Sans", -apple-system, system-ui, sans-serif; --font-serif: "Source Serif Pro", Georgia, serif; --font-mono: "SF Mono", Menlo, Consolas, monospace; --type-display: clamp(56px, 9vw, 96px); --type-h1: clamp(40px, 6vw, 64px); --type-h2: clamp(28px, 4vw, 44px); --type-h3: 20px; --type-body: 16px; --type-small: 14px; --type-eyebrow: 11px; --radius-btn: 2px; --radius-card: 4px; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; } /* ---------- Site extensions (not part of the brand spec) ---------- Derived tokens the site's CSS depends on: channel triplets, surfaces, tints, the book object, the field-guide scroll. Every brand hex above comes from brand/brand-tokens.css; values here are site-owned. Source: tools/brand/site-tokens.css. */ /* Canonical — Black/Orange */ :root, :root[data-theme="current"], :root[data-theme="orange"] { --bg-rgb: 11 11 11; --text-rgb: 245 241 230; --brand-rgb: 226 88 34; --surface: #161616; --surface-alt: #121212; --border: rgb(var(--text-rgb) / 0.15); --border-light: rgb(var(--text-rgb) / 0.08); --overlay-weak: rgb(var(--text-rgb) / 0.04); --overlay-med: rgb(var(--text-rgb) / 0.08); --shadow: rgb(0 0 0 / 0.5); --shadow-soft: rgb(0 0 0 / 0.25); --brand-tint-04: rgb(var(--brand-rgb) / 0.04); --brand-tint-08: rgb(var(--brand-rgb) / 0.08); --brand-tint-12: rgb(var(--brand-rgb) / 0.12); --brand-tint-25: rgb(var(--brand-rgb) / 0.25); --on-brand: var(--bg); /* #0B0B0B on #E25822 = 5.30:1 AA */ --on-brand-hover: var(--text); /* #F5F1E6 on #B8431A = 4.83:1 AA */ --book-spine-1: #1A1008; --book-spine-2: #2A1A0E; --book-spine-3: #3D2816; --scroll-roll-1: #C4A265; --scroll-roll-2: #D4B87A; --scroll-roll-3: #B89655; --scroll-roll-4: #A88545; --parch-1: #F4E8C8; --parch-2: #F0E0B8; --parch-3: #F5ECD4; --parch-4: #F0E4C4; --parch-card: rgb(255 255 255 / 0.72); --parch-edge: 139 109 63; --parch-ink: #2A2118; --danger: #E86A5D; color-scheme: dark; } /* Alternate — French Blue Ink */ :root[data-theme="alt"], :root[data-theme="blue"] { --bg-rgb: 255 255 254; --text-rgb: 15 23 51; --brand-rgb: 42 79 179; --surface: #EDF3FF; --surface-alt: #F5F8FF; --border: rgb(var(--text-rgb) / 0.15); --border-light: rgb(var(--text-rgb) / 0.08); --overlay-weak: rgb(var(--text-rgb) / 0.03); --overlay-med: rgb(var(--text-rgb) / 0.06); --shadow: rgb(var(--text-rgb) / 0.16); --shadow-soft: rgb(var(--text-rgb) / 0.08); --brand-tint-04: rgb(var(--brand-rgb) / 0.04); --brand-tint-08: rgb(var(--brand-rgb) / 0.08); --brand-tint-12: rgb(var(--brand-rgb) / 0.12); --brand-tint-25: rgb(var(--brand-rgb) / 0.25); --on-brand: var(--bg); /* #FFFFFE on #2A4FB3 = 7.32:1 AAA */ --on-brand-hover: var(--bg); /* #FFFFFE on #1A3580 = 11.25:1 AAA */ --book-spine-1: #070C1C; --book-spine-2: #0F1733; --book-spine-3: #1E2C55; --scroll-roll-1: #7E9BD8; --scroll-roll-2: #A9C4FF; --scroll-roll-3: #5B7ABF; --scroll-roll-4: #41609E; --parch-1: #EDF3FF; --parch-2: #E3ECFC; --parch-3: #F5F8FF; --parch-4: #E9F0FF; --parch-card: rgb(255 255 255 / 0.78); --parch-edge: 42 79 179; --parch-ink: #0F1733; --danger: #B3261E; color-scheme: light; } /* Paper — values from brand/BRAND.md (Paper table). --on-brand, wash and band tokens come from the brand block above. Book object and scroll keep the canonical warm values. */ :root[data-theme="paper"] { --bg-rgb: 255 255 255; --text-rgb: 27 36 48; --brand-rgb: 226 88 34; --surface: #FFFFFF; --surface-alt: #FAF6F0; --border: #D7DCE3; --border-light: #E7EBF0; --overlay-weak: rgb(var(--text-rgb) / 0.03); --overlay-med: rgb(var(--text-rgb) / 0.06); --shadow: rgb(20 28 40 / 0.14); --shadow-soft: rgb(20 28 40 / 0.07); --brand-tint-04: rgb(var(--brand-rgb) / 0.04); --brand-tint-08: rgb(var(--brand-rgb) / 0.08); --brand-tint-12: rgb(var(--brand-rgb) / 0.12); --brand-tint-25: rgb(var(--brand-rgb) / 0.25); --parch-ink: #1B2430; --danger: #B3261E; } /* Type: site additions to the brand type block */ :root { /* Google Fonts serves Source Serif Pro as "Source Serif 4" */ --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif; --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; --type-lede: 18px; }