/* =================================================================== QUOTEE V3 — DESIGN TOKENS Steel + Gold, pushed editorial. Two palette modes (default, contrast), three density modes (compact, comfortable, spacious). How to use: - - All tokens cascade off [data-palette] + [data-density] selectors. - Components reference --var only; never raw hex inside components. =================================================================== */ :root { /* ───── TYPE STACK ─────────────────────────────────────────────── */ --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-serif: "Newsreader", "Source Serif Pro", "Iowan Old Style", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; /* ───── TYPE SCALE — modular, editorial ────────────────────────── */ --t-display: clamp(48px, 5.6vw, 72px); /* Splash hero */ --t-h1: clamp(34px, 3.4vw, 46px); /* Proposal hero */ --t-h2: clamp(24px, 2.2vw, 30px); /* Section heads */ --t-h3: 19px; --t-h4: 15px; --t-body: 15px; --t-small: 13px; --t-micro: 11.5px; --t-eyebrow: 10.5px; /* ───── WEIGHTS ────────────────────────────────────────────────── */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 800; /* ───── TRACKING ───────────────────────────────────────────────── */ --tr-display: -0.035em; --tr-h1: -0.028em; --tr-h2: -0.020em; --tr-h3: -0.012em; --tr-body: -0.005em; --tr-eyebrow: 0.16em; --tr-caps: 0.10em; /* ───── RADII — sharp by default, soft only where it matters ───── */ --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-xl: 10px; --r-2xl: 14px; --r-pill: 999px; /* ───── MOTION ─────────────────────────────────────────────────── */ --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; --dur-curtain: 520ms; } /* ═════════════════════════════════════════════════════════════════ PALETTE — DEFAULT (Steel + Gold, editorial) Pushed from V2: warmer paper, deeper neutrals, gold used as a leaf accent on a strict surface hierarchy. ═════════════════════════════════════════════════════════════════ */ :root, [data-palette="default"] { /* Paper hierarchy */ --bg: #fafaf8; /* page background, off-white paper */ --paper: #ffffff; /* primary surface */ --paper-2: #f4f3ef; /* recessed surface — cards-in-cards */ --vellum: #efece5; /* tonal block (sidebar / hero alt) */ --graphite: #1a1a1c; /* editorial dark surface (cover, hero) */ --graphite-2: #232325; --graphite-3: #2e2e31; /* Ink scale */ --ink: #0c0c0e; --ink-soft: #18181b; --ink-mid: #51514f; /* warmer mid */ --ink-mute: #8c8b85; --ink-faint: #b8b7af; --ink-inverse: #f6f4ee; /* Rules */ --rule: #e6e3dc; /* default hairline */ --rule-strong: #c8c5bc; --rule-soft: #efece5; --rule-dark: #3a3a3d; /* hairline on graphite */ /* ▍ GOLD — three weights, used with discipline ▍ */ --gold: #b8923f; /* primary accent — slightly deeper than V2's bf994d */ --gold-deep: #6f5526; /* AA-safe on white (8.4:1) — use for body-size accent text */ --gold-leaf: #d4b370; /* hover / highlight / shimmer */ --gold-pale: #f4ebd6; /* tinted background */ --gold-paler: #faf3e0; --gold-line: rgba(184,146,63,0.40); --gold-glow: rgba(184,146,63,0.18); /* Steel — sparingly, never as accent */ --steel: #6a6a72; --steel-deep: #3a3a3d; --steel-soft: #a4a39c; /* Semantic */ --emerald: #047857; --emerald-soft: #e8f3ed; --cobalt: #1d4ed8; --cobalt-soft: #ecf1fc; --coral: #b8431a; --coral-soft: #fbeee5; --violet: #5b21b6; --violet-soft: #f1ecf9; --link: #6f5526; /* gold-deep as link */ --link-hover: #b8923f; --success: var(--emerald); --warning: #b8431a; --danger: #b91c1c; /* Shadows — cool, low */ --shadow-1: 0 1px 2px rgba(20,20,18,0.04), 0 1px 1px rgba(20,20,18,0.03); --shadow-2: 0 4px 14px rgba(20,20,18,0.06), 0 2px 4px rgba(20,20,18,0.04); --shadow-3: 0 14px 36px rgba(20,20,18,0.10), 0 6px 14px rgba(20,20,18,0.05); --shadow-pop: 0 24px 60px rgba(20,20,18,0.16), 0 8px 20px rgba(20,20,18,0.08); --shadow-gold: 0 4px 16px rgba(184,146,63,0.20); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6); } /* ═════════════════════════════════════════════════════════════════ PALETTE — CONTRAST-SAFE For WCAG-strict deployments and accessibility audits. Gold-deep replaces gold as the default accent for text-bearing surfaces; gold remains only as a decorative leaf line and on dark surfaces where contrast is already comfortable. ═════════════════════════════════════════════════════════════════ */ [data-palette="contrast"] { --bg: #ffffff; --paper: #ffffff; --paper-2: #f2f1ec; --vellum: #ebe8e0; --graphite: #111114; --graphite-2: #1c1c20; --graphite-3: #2a2a2e; --ink: #060608; --ink-soft: #0e0e10; --ink-mid: #3b3a36; /* darker mid for AA */ --ink-mute: #6b6a63; --ink-faint: #9a988f; --ink-inverse: #ffffff; --rule: #d8d4c8; --rule-strong: #b1ada1; --rule-soft: #ecebe4; --rule-dark: #3f3e3a; /* Gold rebalanced — gold-deep promoted to primary; gold = decorative only */ --gold: #6f5526; /* primary now AA-safe (8.4:1 on white) */ --gold-deep: #4a3917; --gold-leaf: #b8923f; /* leaf hover/highlight, never on text */ --gold-pale: #efe2c4; --gold-paler: #f7ecd0; --gold-line: rgba(111,85,38,0.50); --gold-glow: rgba(111,85,38,0.18); --steel: #4a4a4d; --steel-deep: #2a2a2d; --steel-soft: #8d8c85; --emerald: #015c41; --emerald-soft: #dfece4; --cobalt: #1530a3; --cobalt-soft: #e3e9f7; --coral: #8a3010; --coral-soft: #f7e6d8; --violet: #3f176d; --violet-soft: #ebe2f5; --link: #1530a3; --link-hover: #060608; --success: var(--emerald); --warning: var(--coral); --danger: #8b1212; --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04); --shadow-2: 0 4px 14px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05); --shadow-3: 0 14px 36px rgba(0,0,0,0.12), 0 6px 14px rgba(0,0,0,0.07); --shadow-pop: 0 24px 60px rgba(0,0,0,0.20), 0 8px 20px rgba(0,0,0,0.10); --shadow-gold: 0 4px 16px rgba(111,85,38,0.18); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5); } /* ═════════════════════════════════════════════════════════════════ DENSITY Three modes affect spacing, line-height, control sizes. Layout structure stays the same; only the breathing room changes. ═════════════════════════════════════════════════════════════════ */ :root, [data-density="comfortable"] { --sp-0: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px; --sp-11: 96px; --row-h: 36px; --ctrl-h: 34px; --nav-h: 56px; --line: 1.55; } [data-density="compact"] { --sp-0: 2px; --sp-1: 3px; --sp-2: 6px; --sp-3: 9px; --sp-4: 12px; --sp-5: 15px; --sp-6: 18px; --sp-7: 24px; --sp-8: 32px; --sp-9: 44px; --sp-10: 56px; --sp-11: 72px; --row-h: 30px; --ctrl-h: 28px; --nav-h: 48px; --line: 1.45; } [data-density="spacious"] { --sp-0: 3px; --sp-1: 5px; --sp-2: 10px; --sp-3: 15px; --sp-4: 20px; --sp-5: 26px; --sp-6: 32px; --sp-7: 44px; --sp-8: 56px; --sp-9: 72px; --sp-10: 96px; --sp-11: 128px; --row-h: 42px; --ctrl-h: 38px; --nav-h: 64px; --line: 1.65; } /* ───── LAYOUT TOKENS ───────────────────────────────────────────── */ :root { --left-rail: 268px; --right-rail: 360px; --reader-max: 760px; --container-xl: 1320px; --topbar-h: 3px; /* gold progress rail above nav */ } /* ═════════════════════════════════════════════════════════════════ BASE — global element styling that downstream sheets extend ═════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink-soft); font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--line); font-feature-settings: "ss01", "cv11"; /* Inter alt-style */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } button { font: inherit; background: none; border: none; cursor: pointer; padding: 0; color: inherit; } a { color: var(--link); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--link-hover); text-decoration: underline; } ul, ol { padding-left: 1.25em; margin: 0 0 var(--sp-4); } li { margin-bottom: var(--sp-1); } ::selection { background: var(--gold-pale); color: var(--ink); } /* ───── HEADINGS ────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); text-wrap: balance; font-weight: var(--w-bold); letter-spacing: var(--tr-h3); } h1 { font-size: var(--t-h1); line-height: 1.04; font-weight: var(--w-black); letter-spacing: var(--tr-h1); } h2 { font-size: var(--t-h2); line-height: 1.15; font-weight: var(--w-bold); letter-spacing: var(--tr-h2); } h3 { font-size: var(--t-h3); line-height: 1.3; } h4 { font-size: var(--t-h4); line-height: 1.35; } p { margin: 0 0 var(--sp-4); text-wrap: pretty; } /* ───── EDITORIAL ATOMS ────────────────────────────────────────── */ .serif { font-family: var(--font-serif); font-feature-settings: "ss01"; } .mono { font-family: var(--font-mono); } .num { font-variant-numeric: tabular-nums; } .muted { color: var(--ink-mute); } .mid { color: var(--ink-mid); } .gold { color: var(--gold-deep); } .gold-bg { background: var(--gold-pale); } .eyebrow { font-size: var(--t-eyebrow); font-weight: var(--w-bold); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-mute); font-feature-settings: "ss02"; } .eyebrow-gold { color: var(--gold-deep); } .lead { font-size: 17px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; } .caption { font-size: var(--t-small); color: var(--ink-mid); line-height: 1.5; } /* gold leaf horizontal accent — editorial divider */ .gold-leaf-rule { height: 1px; background: linear-gradient(90deg, var(--gold), var(--gold-leaf) 50%, transparent); border: none; margin: 0; } /* dotted hairline */ .dot-rule { border-top: 1px dashed var(--rule-strong); } /* keyframes shared across product */ @keyframes pulse { 0%, 100% { transform: scale(0.85); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } } @keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.25); } } @keyframes scan-line { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } /* ═════════════════════════════════════════════════════════════════ V4 — OPERATIONAL TOKENS Added for the five planes (Trust · Money · Control · Commercial · MSSP). Tokens only — no component rules in this file. Direction: [data-direction="ambitious" | "conservative"] Mode: [data-mode="dark" | "light"] (per-surface, opt-in) ═════════════════════════════════════════════════════════════════ */ :root, [data-palette="default"] { /* ── Distributor freshness — 24/48/72 thresholds ──────────────── */ --fresh-fg: #0f5e3f; --fresh-bg: #e6f1ea; --fresh-bd: #b8d4c2; --stale-fg: #7a5a14; --stale-bg: #f7edd3; --stale-bd: #d9c386; --critical-fg: #8b1212; --critical-bg: #f7e0e0; --critical-bd: #d99a9a; /* ── Confidence bands — High ≥80 · Watch 60–79 · Low <60 ──────── */ --conf-hi-fg: #0f5e3f; --conf-hi-bg: #e6f1ea; --conf-mid-fg: #7a5a14; --conf-mid-bg: #f7edd3; --conf-lo-fg: #8b1212; --conf-lo-bg: #f7e0e0; /* ── Catalogue resolution — cached vs linked vs canonical ─────── */ --cached-fg: #5b21b6; /* violet — needs promotion */ --cached-bg: #f1ecf9; --cached-bd: #c8b5e6; --linked-fg: #0f5e3f; --linked-bg: #e6f1ea; --canonical-fg: #1a1a1c; --canonical-bg: #efece5; /* ── Risk · danger surfaces (Declined Services, Critical Freshness) */ --risk-bg: #fff5f0; --risk-bg-2: #fbe4d4; --risk-ink: #6e1e0a; --risk-bd: #d4a48a; --risk-accent: #b8431a; /* ── Provenance plane colors — by actor ──────────────────────── */ --prov-ai: var(--gold); --prov-ai-soft: var(--gold-pale); --prov-human: var(--cobalt); --prov-human-soft: var(--cobalt-soft); --prov-template: var(--steel); --prov-template-soft: var(--paper-2); --prov-vendor: var(--violet); --prov-vendor-soft: var(--violet-soft); /* ── Money plane — revenue stream tints ──────────────────────── */ --otr-tint: #eef1f7; /* one-time, cool */ --otr-ink: #1d4ed8; --mrr-tint: var(--gold-pale); --mrr-ink: var(--gold-deep); --arr-tint: #e6efe9; --arr-ink: #047857; /* ── Control plane — policy guardrail states ─────────────────── */ --policy-ok-bg: #e6f1ea; --policy-ok-fg: #0f5e3f; --policy-warn-bg: #f7edd3; --policy-warn-fg: #7a5a14; --policy-block-bg: #f7e0e0; --policy-block-fg: #8b1212; /* ── Margin band stops — visible at-a-glance on guardrail UIs ── */ --margin-headless-floor: 38; /* % — auto-send floor */ --margin-mgmt-floor: 35; /* % — sales-mgmt gate */ --margin-operator-floor: 28; /* % — operator gate */ } /* contrast palette — re-bind plane tokens to AA-safe values */ [data-palette="contrast"] { --fresh-fg: #035a36; --fresh-bg: #d9ecde; --fresh-bd: #92b89e; --stale-fg: #5a3f00; --stale-bg: #f1dfa6; --stale-bd: #b8941a; --critical-fg: #6b0a0a; --critical-bg: #f1c8c8; --critical-bd: #b87171; --conf-hi-fg: #035a36; --conf-hi-bg: #d9ecde; --conf-mid-fg: #5a3f00; --conf-mid-bg: #f1dfa6; --conf-lo-fg: #6b0a0a; --conf-lo-bg: #f1c8c8; --cached-fg: #3f176d; --cached-bg: #e8ddf4; --cached-bd: #a888c8; --linked-fg: #035a36; --linked-bg: #d9ecde; --canonical-fg: #060608; --canonical-bg: #ebe8e0; --risk-bg: #ffece0; --risk-bg-2: #f7cbab; --risk-ink: #4a1606; --risk-bd: #b87a5a; --risk-accent: #8a3010; } /* ═════════════════════════════════════════════════════════════════ DIRECTION — Ambitious (default, editorial V3) vs Conservative. Conservative dials editorial moves down ~30%: smaller display type, less serif italic, less graphite emphasis, tighter density. data-direction="ambitious" is the default for V4 ship. ═════════════════════════════════════════════════════════════════ */ :root, [data-direction="ambitious"] { --dir-display-scale: 1; --dir-serif-italic: italic; --dir-hero-emphasis: 1; /* multiplier for graphite blocks */ --dir-gold-emphasis: 1; --dir-rule-soft: var(--rule-soft); --dir-spotlight: 1; } [data-direction="conservative"] { --dir-display-scale: 0.78; /* tames editorial display */ --dir-serif-italic: normal; /* gold italics → upright */ --dir-hero-emphasis: 0.5; --dir-gold-emphasis: 0.7; --dir-rule-soft: var(--rule); --dir-spotlight: 0.5; } /* Direction-aware text atoms — components opt in by class */ .dir-display { font-size: calc(var(--t-h1) * var(--dir-display-scale)); } .dir-italic { font-style: var(--dir-serif-italic); } /* ═════════════════════════════════════════════════════════════════ DARK MODE — opt-in via [data-mode="dark"] on root surfaces. Per V4 ratification lean: Internal Dashboard · AI Run History · Simulation Sandbox default to dark; customer-facing surfaces NEVER inherit dark (enforced by [data-persona="customer"] override below). ═════════════════════════════════════════════════════════════════ */ [data-mode="dark"] { --bg: #0e0e10; --paper: #16161a; --paper-2: #1c1c20; --vellum: #232325; --graphite: #0a0a0c; --graphite-2: #16161a; --graphite-3: #232325; --ink: #f6f4ee; --ink-soft: #e8e6df; --ink-mid: #a8a69d; --ink-mute: #6e6c63; --ink-faint: #4a4843; --ink-inverse: #0c0c0e; --rule: #2a2a2e; --rule-strong: #3a3a3d; --rule-soft: #232325; --rule-dark: #3a3a3d; --gold-pale: rgba(184,146,63,0.12); --gold-paler: rgba(184,146,63,0.06); --otr-tint: rgba(29,78,216,0.14); --mrr-tint: rgba(184,146,63,0.14); --arr-tint: rgba(4,120,87,0.14); --fresh-bg: rgba(15,94,63,0.18); --stale-bg: rgba(122,90,20,0.20); --critical-bg: rgba(139,18,18,0.22); --shadow-1: 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 4px 14px rgba(0,0,0,0.5); --shadow-3: 0 14px 36px rgba(0,0,0,0.6); --shadow-pop: 0 24px 60px rgba(0,0,0,0.8); } /* Customer persona NEVER inherits dark — enforce */ body[data-persona="customer"] { color-scheme: light; } body[data-persona="customer"][data-mode="dark"] { /* hard light fallback */ }