/* ora-ds-tokens.css THE DESIGN SYSTEM, vendored + bridged. (Styling pass 2026-08-19.) Source of truth: "Oravion Design System-handoff" (project/tokens/*.css). The design system is the authority: where it conflicted with this repo's pre-existing token values, the DS value WINS and the repo token is re-pointed at it here. Nothing in this file is invented — every value is copied from the handoff. The full repo-token to DS-token mapping table ships in the 2026-08-19 skin dispatch. Load order (every console page): tokens.base -> tokens.teglo.light -> tokens.ceremonial -> THIS FILE -> component sheets. This file is last of the token layers so its re-points win the cascade. (Never write the sequence star-slash inside a comment - it closes it.) */ @import url("https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..600;1,7..72,300..500&family=Mulish:ital,wght@0,300..800;1,400..600&family=Public+Sans:ital,wght@0,300..800;1,400..700&display=swap"); :root { /* ══ DS: GIVEN PALETTE — the five brand colours, never re-mixed ══════ */ --irise-nacre: #F4F1F8; /* primary ground */ --lavande-froide: #C9C2E8; /* primary accent */ --bleu-glacier: #CFE7F2; /* secondary accent */ --rose-tres-pale: #F6EDE2; /* warm neutral */ --rose-pale: #F6DDE4; /* warm accent */ /* DS: iridescent ramp. Per the DS, the sweep is for chromatic state motion, hairline highlights and orb film — NEVER a page background. */ --irise-1: #ABC0F6; --irise-2: #C7D6F7; --irise-3: #D5D9F2; --irise-4: #E4E2F8; --irise-5: #E1EDF6; /* ══ DS: NEUTRAL SCALE (warm-leaning violet grey; n-100 IS the ground) */ --n-0:#FFFFFF; --n-25:#FCFBFD; --n-50:#F8F6FB; --n-100:#F4F1F8; --n-150:#EDE9F2; --n-200:#E3DEEA; --n-300:#CFC9DA; --n-400:#ADA5BB; --n-500:#877F95; --n-600:#655E72; --n-700:#4C4658; --n-800:#38333F; --n-900:#24212B; --n-950:#15131A; /* ══ DS: TEXT ═══════════════════════════════════════════════════════ */ --text-primary: var(--n-900); --text-secondary: var(--n-700); --text-tertiary: var(--n-600); --text-disabled: var(--n-400); --text-inverse: var(--n-25); --text-accent: #544A9B; /* ══ DS: SURFACES — three levels; height reads from light, not depth ═ */ --surface-ground: var(--irise-nacre); --surface-raised: #FCFBFD; --surface-overlay: var(--n-0); --surface-sunken: var(--n-150); --surface-inverse: var(--n-900); --surface-scrim: rgba(36,33,43,.32); /* ══ DS: BORDERS ════════════════════════════════════════════════════ */ --border-hairline: rgba(36,33,43,.06); --border-default: rgba(36,33,43,.11); --border-strong: rgba(36,33,43,.20); --border-accent: #B3A9DE; /* ══ DS: FOCUS — outline, never box-shadow (inline styles would win) ═ */ --focus-ring: #6257AE; --focus-gap: var(--surface-ground); --focus-width: 2px; --focus-gap-width: 2px; /* ══ DS: FIVE SEMANTIC STATES ═══════════════════════════════════════ */ --state-healthy-ink:#2C6379; --state-healthy-tint:#DCEBF3; --state-healthy-fill:#92B2C0; --state-degraded-ink:#985034; --state-degraded-tint:#F8EBE3; --state-degraded-fill:#D0AA9A; --state-down-ink:#8E3B55; --state-down-tint:#F7DFE6; --state-down-fill:#CB9AA9; --state-unknown-ink:#544A9B; --state-unknown-tint:#E9E5F7; --state-unknown-fill:#AAA4D0; --state-na-ink:#6E6779; --state-na-tint:#EDEAF1; --state-na-fill:#B8B3BF; /* DS: altitude + informational */ --alt-platform-ink:#544A9B; --alt-platform-tint:#E9E5F7; --alt-vertical-ink:#2C6379; --alt-vertical-tint:#DCEBF3; --info-ink:#2C6379; --info-tint:#DCEBF3; --evidence-ink:#544A9B; --evidence-underline:rgba(84,74,155,.30); /* ══ DS: SPACE — the 4px base scale, with two half-steps for control interiors. VENDORED 2026-08-19 after a defect: this scale was used throughout css/console-skin.css but had never been copied in, so every `padding: var(--space-9) ...` shorthand referenced an UNDEFINED custom property. An invalid var() in a shorthand voids the whole declaration at computed-value time — which is why page and card padding was silently resolving to 0 and content sat against every edge. */ --space-0:0px; --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px; --space-5:12px; --space-6:16px; --space-7:20px; --space-8:24px; --space-9:32px; --space-10:40px; --space-11:48px; --space-12:64px; --space-13:80px; --space-14:112px; /* ══ DS: RADII — soft, not pill-happy ═══════════════════════════════ */ --radius-xs:4px; --radius-sm:6px; --radius-md:9px; --radius-lg:13px; --radius-xl:18px; --radius-2xl:26px; /* ══ DS: ELEVATION — light, wide, low-opacity. Pearl on paper, never a drop shadow. Every raised surface also carries a 1px top highlight. ═ */ --shadow-raised: 0 1px 2px rgba(36,33,43,.04),0 3px 10px -2px rgba(36,33,43,.055),0 10px 28px -12px rgba(36,33,43,.07); --shadow-soft: 0 1px 2px rgba(36,33,43,.035),0 6px 18px -6px rgba(36,33,43,.06); --shadow-overlay: 0 1px 2px rgba(36,33,43,.04),0 8px 24px -6px rgba(36,33,43,.10),0 24px 60px -20px rgba(36,33,43,.14); --highlight-top: inset 0 1px 0 rgba(255,255,255,.9); --glow-irise: 0 0 0 1px rgba(171,192,246,.30),0 4px 18px -6px rgba(171,192,246,.45),0 4px 22px -8px rgba(246,221,228,.40); /* ══ DS: MOTION — nothing bounces; it decelerates and stops ═════════ */ --dur-instant:80ms; --dur-fast:140ms; --dur-base:220ms; --dur-slow:420ms; --ease-standard:cubic-bezier(.22,.61,.36,1); --ease-enter:cubic-bezier(.16,.84,.44,1); --ease-exit:cubic-bezier(.4,0,.72,.24); --lift-hover:translateY(-1px); /* ══ DS: FONTS ══════════════════════════════════════════════════════ */ --font-serif:"Literata",ui-serif,Georgia,"Times New Roman",serif; --font-sans:"Public Sans","Mulish","Avenir Next",Avenir,ui-sans-serif,system-ui,"Helvetica Neue",sans-serif; /* ══ DS: TYPE SCALE (operator spec, 2026-08-25) ═════════════════════ Public Sans everywhere; the console's stray body sizes collapse into this scale. size/line-height/weight per role. Components consume the bridge tokens below (--type-display/body/meta) or these directly. */ --type-h2-size:48px; --type-h2-lh:64px; --type-h2-fw:600; --type-h3-size:32px; --type-h3-lh:48px; --type-h3-fw:600; --type-h4-size:24px; --type-h4-lh:36px; --type-h4-fw:600; --type-h5-size:20px; --type-h5-lh:30px; --type-h5-fw:600; --type-subtitle2-size:14px; --type-subtitle2-lh:22px; --type-subtitle2-fw:600; --type-body1-size:16px; --type-body1-lh:24px; --type-body1-fw:500; --type-body2-size:14px; --type-body2-lh:22px; --type-body2-fw:500; --type-overline-size:12px; --type-overline-lh:18px; --type-overline-fw:700; --type-overline-ls:1.2px; --type-btn-lg-size:15px; --type-btn-lg-lh:26px; --type-btn-fw:700; --type-btn-md-size:14px; --type-btn-md-lh:24px; --type-btn-sm-size:13px; --type-btn-sm-lh:22px; /* ════════════════════════════════════════════════════════════════════ THE BRIDGE — repo token -> DS token. Every component sheet in this repo already speaks in the repo names below, so re-pointing them here reskins every surface at once without touching a single component rule. DS value wins in every row. ════════════════════════════════════════════════════════════════════ */ /* type families: Public Sans across display, heading and body (operator spec 2026-08-25 — the serif display retires; Literata stays available as --font-serif for anything that explicitly asks for it). */ --font-display: var(--font-sans); --font-body: var(--font-sans); --font-heading: var(--font-sans); /* surfaces */ --color-bg-base: var(--surface-ground); --color-bg-surface: var(--surface-overlay); /* cards are white, floating */ --color-bg-elevated: var(--surface-raised); --color-bg-glass: rgba(36,33,43,.04); /* ink */ --color-text: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-tertiary: var(--text-tertiary); --color-text-inverse: var(--text-inverse); /* borders */ --color-border-subtle: var(--border-hairline); --color-border-default: var(--border-default); --color-border-strong: var(--border-strong); --color-border-focus: var(--focus-ring); /* ceremonial card + pill type -> the DS scale (this file loads after tokens.ceremonial.css, so these re-points win): pills ride the button scale, card body rides body1, card subtitles ride H5. */ --ops-cta-pill-font-size: var(--type-btn-md-size); --ops-cta-pill-font-size-lg: var(--type-btn-lg-size); --ops-font-size-subtitle: var(--type-h5-size); --ops-font-size-body: var(--type-body1-size); /* The four ceremonial sizes the 2026-08-19 pass missed (subtitle/body and the two pill sizes were bridged; these four were not — the values already agree, so this is a re-point, not a repaint). */ --ops-font-size-display: var(--type-h2-size); --ops-font-size-title: var(--type-h3-size); --ops-font-size-small: var(--type-body2-size); --ops-font-size-micro: var(--type-overline-size); --ops-font-family-body: var(--font-sans); /* status quartet -> the DS five states (LIVE/DOWN/STALE/EXPECTED/dash) */ --color-status-ok: var(--state-healthy-ink); --color-status-warn: var(--state-degraded-ink); --color-status-danger: var(--state-down-ink); --color-status-muted: var(--state-na-ink); --color-status-ok-bright: var(--state-healthy-fill); --color-status-warn-bright: var(--state-degraded-fill); --color-status-danger-bright: var(--state-down-fill); --ok-bg: var(--state-healthy-tint); --warn-bg: var(--state-degraded-tint); --danger-bg: var(--state-down-tint); /* accent — DS lavender, carrying charts, links and active nav. (The pre-redesign accent was a green; the DS wins, so every chart, bar, marker and link moves to lavender with no component edits.) */ --color-accent: var(--text-accent); --color-accent-bright: var(--state-unknown-fill); --color-accent-soft: var(--state-unknown-tint); --accent-rgb: 84, 74, 155; --accent-glow: rgba(84,74,155,.20); --accent-bg: var(--state-unknown-tint); --accent-subtle: var(--state-unknown-tint); /* elevation + radii */ --shadow-sm: var(--shadow-soft); --shadow-md: var(--shadow-raised); --radius: var(--radius-xl); /* motion: repo durations ride the DS curve + tempo */ --duration-fast: var(--dur-fast); --duration-medium: var(--dur-base); --duration-slow: var(--dur-slow); --ease-out: var(--ease-standard); --ease-in-out: var(--ease-standard); --ease: var(--ease-standard); /* ══ THE CANVAS ═════════════════════════════════════════════════════ The console's page ground is the SAME ambient field the spin-up (brand authoring) surface already floats on — lifted here to a shared token so every console page shares one canvas. Composition and stops are the ceremonial field verbatim (css/tokens.ceremonial.css); this token only gives it a name the console can consume. Flagged in the report: the field's stops are ceremonial-local values, NOT the DS palette. Their DS equivalents (lavande-froide / bleu- glacier / rose-tres-pale / rose-pale over irise-nacre) are a one-line swap, deliberately NOT taken here because the brief says to reuse the onboarding background as it stands. */ --console-canvas: var(--ops-field-bg); } /* DS reduced-motion contract, verbatim: every duration collapses and the global rule stops any animation this repo declares elsewhere. */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant:1ms; --dur-fast:1ms; --dur-base:1ms; --dur-slow:1ms; --duration-instant:1ms; --duration-fast:1ms; --duration-medium:1ms; --duration-slow:1ms; --lift-hover:none; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* DS focus contract: an OUTLINE, never a box-shadow — a box-shadow ring is silently discarded on any control that sets box-shadow for elevation. */ *:focus { outline: none; } *:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-gap-width); border-radius: inherit; } ::selection { background: var(--irise-4); color: var(--text-primary); }