/* Ovae tokens, version 2 (Thu 2026-10-15). The master brand token file.
   Superset of ovae-live-tokens.css (version 1.0 of the Ovae Live brand): every --ol-* token is here as --ov-* with the same value, except --ov-mute, which is raised for AA (see its comment).
   Version 1 of the Ovae brand is the page at ovae-site-v2/brand.
   Import: <link rel="stylesheet" href="ovae-tokens.css">  Fonts: ../../assets/fonts/tt-norms-pro/tt-norms-pro.css
   Read the book first: index.html in this folder, or BRAND-BOOK.md. Mapping table --ol-* to --ov-*: chapter 22 of the book.
   Classes: .ov-ground (slate page), .ov-glass (card), .ov-eyebrow (label), .ov-light (paper band or page), .ov-band (band radius).
   Class and keyframe names follow the same prefix swap: .ol-glass is .ov-glass, ol-rise is ov-rise. */

:root{
  color-scheme: dark;

  /* ---- Ground and surface. 1 slate ground with glass on top. ---- */
  --ov-ground: #11171D; /* Page ground. Room name: --plum (a leftover from the original brand). */
  --ov-ground-deep: #0B1116; /* Deepest slate: inset wells, the live presence pill's detail line. Room name: --plum-deep. */
  --ov-surface: #1A2530; /* Solid surface for panels that must be opaque (pop panel, input fills). Room name: --surface. */
  --ov-glass: rgba(34,48,58,.58); /* Glass card fill when blur is supported. Room name: --glass. */
  --ov-glass-solid: rgba(29,41,51,.96); /* Glass card fill when blur is NOT supported (the @supports fallback). Room name: --glass-solid. */
  --ov-glass-line: rgba(216,231,243,.16); /* 1px border on every glass surface. Room name: --glass-line. */
  --ov-glass-hi: rgba(240,252,252,.07); /* Inset 1px top highlight on glass surfaces. Room name: --glass-hi. */
  --ov-well: rgba(11,17,22,.45); /* Inner row fill on top of glass (seats, list rows, tracker cards). No blur. The room uses .42, .45 and .5; .45 is canonical. */
  --ov-line: rgba(123,201,196,.18); /* Teal-tinted hairline: empty states, ghost button border. Room name: --line. */
  --ov-line-soft: rgba(216,231,243,.10); /* Neutral hairline: dividers, row borders, bar track. Room name: --line-soft. */
  --ov-lift: rgba(76,104,118,.46); /* The soft light lifted at the top of the ground (radial, 1200 by 640 at 62% -10%). */
  --ov-warm-amber: rgba(227,184,115,.07); /* Faint amber warmth at the ground's lower right (radial, 760 by 520 at 102% 72%). */
  --ov-warm-teal: rgba(123,201,196,.07); /* Faint teal warmth at the ground's lower left (radial, 820 by 620 at -4% 104%). */

  /* ---- Ink. 3 ink levels and 1 ink for use on an accent fill. ---- */
  --ov-ink: #EAF0F4; /* Primary text. 15.69 to 1 on the ground. Room name: --ink. */
  --ov-ink-soft: #A8B7C3; /* Secondary text, labels, descriptions. 8.78 to 1 on the ground. Room name: --ink-soft. */
  --ov-mute: #7F909E; /* Tertiary text, hints, footers. Raised from #70818F in version 2 so it passes AA everywhere: 5.49 to 1 on the ground, 4.73 on surface, 4.68 on glass. Live name: --ol-mute. */
  --ov-ink-on-accent: #11171D; /* Text on a teal or amber fill (the ground colour). 9.44 to 1 on teal, 9.77 to 1 on amber. */

  /* ---- Accents. Exactly 2 accents, 1 alert hue. Meaning is fixed, see the colour chapter. ---- */
  --ov-teal: #7BC9C4; /* Working or fine: live, now, done, the primary action on a ready page. Room name: --teal. Same hex as the original brand. */
  --ov-teal-soft: #A9DDD9; /* Teal for text and eyebrows on glass (12.05 to 1). Room name: --teal-soft. */
  --ov-teal-tint: rgba(123,201,196,.13); /* Teal wash: done segments, fact rows, kind tags. Room name: --teal-tint. */
  --ov-teal-edge: rgba(123,201,196,.36); /* Border of the NOW card (the 1 card that carries a teal edge). */
  --ov-amber: #E3B873; /* Needs a person: ready and unopened, in conversation, late, attention. Room name: --amber. */
  --ov-amber-lite: #F2D9AE; /* Amber highlight: the light in the editing rim and glow ring. Room name: --gold-lite. */
  --ov-amber-tint: rgba(227,184,115,.13); /* Amber wash: nudge, seat-in-talk, ask rows. Room name: --amber-tint. */
  --ov-amber-edge: rgba(227,184,115,.45); /* Amber border on open and late cards (.55 on the ready cell). */
  --ov-crit: #F0907E; /* Over plan or error. Never decoration. 7.73 to 1. Room name: --crit. */

  /* ---- Type. TT Norms Pro everywhere. Self-hosted, see the book's start chapter. ---- */
  --ov-font: "TT Norms Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* The only family. Room name: --font. */
  --ov-fs-micro: 11px; /* FLOOR. Nothing renders smaller. Day labels, smallest tags.  */
  --ov-fs-eyebrow: 12px; /* Eyebrows, live label, tracker count. */
  --ov-fs-caption: 12.5px; /* Captions, update stamps, builder lines. */
  --ov-fs-small: 14px; /* Control text, session name, small body. */
  --ov-fs-ui: 15px; /* Row text, status lines. */
  --ov-fs-body: 16px; /* Body and list text. */
  --ov-fs-lede: 17px; /* Goal lines and lede paragraphs. */
  --ov-fs-sentence: 20px; /* A single stated sentence. */
  --ov-fs-panel: 24px; /* Panel titles (Build tracker). */
  --ov-fs-brand: 28px; /* Wordmark in the header, the clock. */
  --ov-fs-title: 42px; /* The NOW title (38px at room display). */
  --ov-fs-figure: 56px; /* Attention counts (64px at room display). */
  --ov-fs-figure-lg: 60px; /* The NOW time count (54px at room display). */
  --ov-fw-regular: 400; /* Body. */
  --ov-fw-medium: 500; /* Display, titles, figures, the wordmark. */
  --ov-fw-semi: 600; /* Eyebrows, buttons, chips, emphasis. */
  --ov-fw-bold: 700; /* Small tags only (the LIVE tag). */
  --ov-track-figure: -.04em; /* Large figures. */
  --ov-track-brand: -.025em; /* The wordmark at 28px. */
  --ov-track-title: -.02em; /* Titles and the clock. */
  --ov-track-eyebrow: .16em; /* Eyebrows and day labels (uppercase). */
  --ov-track-tag: .1em; /* Chips and tags (uppercase). */
  --ov-lh-display: 1.1; /* Titles. */
  --ov-lh-body: 1.45; /* Body and rows. */
  --ov-lh-lede: 1.5; /* Lede and goal lines. */

  /* ---- Radius. 3 working radii plus 2 supporting. ---- */
  --ov-r-control: 12px; /* Inputs, segments, wells, list rows. Room name: --r-control. */
  --ov-r-row: 14px; /* Tracker cards and library cards. */
  --ov-r-card: 20px; /* Glass cards. Room name: --r-card. */
  --ov-r-pill: 22px; /* Buttons, chips, the presence pill, the floating CTA. Room name: --r-pill. */
  --ov-r-bar: 8px; /* Progress bar track and fill. */

  /* ---- Glass: blur, shadow and glow. The depth system. There is no other texture. ---- */
  --ov-blur-card: blur(22px) saturate(1.15); /* blur filter for glass cards and the floating CTA. */
  --ov-blur-pill: blur(14px) saturate(1.25); /* blur filter for the presence pill when not live. */
  --ov-shadow-card: 0 18px 40px rgba(4,10,16,.38), inset 0 1px 0 var(--ov-glass-hi); /* Glass card elevation. Room name: --shadow. */
  --ov-shadow-float: 0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 var(--ov-glass-hi); /* Floating CTA. */
  --ov-shadow-announce: 0 10px 28px rgba(0,0,0,.45); /* The announce bar. */
  --ov-shadow-pop: -20px 0 60px rgba(0,0,0,.55); /* The slide-in pop panel. */
  --ov-shadow-fresh: 0 0 0 1px rgba(227,184,115,.45), 0 8px 22px rgba(0,0,0,.35); /* Unopened ready card (pulses to a 4px ring). */
  --ov-glow-ready: 0 0 34px 2px rgba(227,184,115,.2); /* Glow on the ready attention cell (4.4s loop). */
  --ov-glow-now: 0 0 24px rgba(123,201,196,.25); /* Glow on the current timeline segment. */
  --ov-glow-edit: 0 0 0 2px var(--ov-amber-lite), 0 0 28px 6px rgba(227,184,115,.55), 0 0 64px 10px rgba(169,221,217,.35); /* The edit ring that hugs a changed element. */
  --ov-overlay: rgba(8,12,16,.7); /* Scrim behind the pop panel. */

  /* ---- Spacing. Named by pixel value, exactly the steps the room uses. ---- */
  --ov-sp-4: 4px; /* Track gaps. */
  --ov-sp-6: 6px; /* Timeline gap. */
  --ov-sp-8: 8px; /* List gap, tight rows. */
  --ov-sp-10: 10px; /* Card list gap, library gap. */
  --ov-sp-12: 12px; /* Default gap inside cards. */
  --ov-sp-14: 14px; /* Attention band gap, header gap. */
  --ov-sp-16: 16px; /* Section gap inside a card. */
  --ov-sp-18: 18px; /* Room display grid gap. */
  --ov-sp-20: 20px; /* Grid gap between cards. */
  --ov-sp-22: 22px; /* Card padding, vertical. */
  --ov-sp-24: 24px; /* Card padding, horizontal. */
  --ov-sp-32: 32px; /* Page padding. */
  --ov-sp-36: 36px; /* Page padding at room display. */

  /* ---- Layout. Breakpoints cannot live in custom properties; they are listed in comments. ---- */
  --ov-wrap: 1500px; /* Page max width. */
  --ov-wrap-display: 1860px; /* Page max width from 1700px up (room display, 1920 by 1080). */
  --ov-pad-x: 32px; /* Page horizontal padding. */
  --ov-tracker-w: 420px; /* Tracker column width. */
  --ov-tracker-w-display: 470px; /* Tracker column width from 1700px up. */
  --ov-card-min: 200px; /* Minimum column width of the library and seat grids. */

  /* ---- Motion. Passive, short, and off under prefers-reduced-motion. ---- */
  --ov-ease: cubic-bezier(.2,0,0,1); /* Default easing for every transition. */
  --ov-ease-out: cubic-bezier(.2,.8,.2,1); /* Presence pill easing. */
  --ov-ease-pop: cubic-bezier(.2,1.4,.4,1); /* Pill arrival only (a slight overshoot). */
  --ov-dur-fast: 180ms; /* Hover and press. */
  --ov-dur-state: 280ms; /* Card state changes (background, border, opacity). */
  --ov-dur-med: 420ms; /* Pill enter, state swap. */
  --ov-dur-bar: 600ms; /* Progress bar width. */
  --ov-dur-slow: 1400ms; /* Slow sweeps. */
  --ov-dur-rise: 500ms; /* Card arrival (rise), staggered 60ms. */
  --ov-loop-breathe: 3600ms; /* Live dots. */
  --ov-loop-glow: 4400ms; /* Ready cell glow. */
  --ov-loop-fresh: 3200ms; /* Unopened ready card pulse. */
  --ov-loop-shimmer: 2600ms; /* Current step shimmer. */
  --ov-loop-flow: 3200ms; /* Working band flow. */
  --ov-loop-pill: 2400ms; /* Live pill halo. */
  --ov-loop-rim: 3200ms; /* Editing rim rotation. */
  --ov-ring: 2600ms; /* Edit ring on a changed element. */
  --ov-aurora: 2200ms; /* Page arrival line. */

  /* ================= NEW IN VERSION 2 (not in the Ovae Live file) ================= */

  /* ---- Role tokens: the same role points at a different value on a dark or a light surface. Write components with these and they work on both. ---- */
  --ov-teal-fill: #7BC9C4; /* Teal as a fill (buttons, tags, bars) on any surface. Text on it is --ov-ink-on-accent. */
  --ov-amber-fill: #E3B873; /* Amber as a fill on any surface. */
  --ov-teal-text: #A9DDD9; /* Teal as text. Dark: 12.05 to 1 on the ground. Light scope: #1B635E. */
  --ov-amber-text: #E3B873; /* Amber as text. Dark: 9.77 to 1 on the ground. Light scope: #7A4F0E. */
  --ov-crit-text: #F0907E; /* Alert as text. Dark: 7.73 to 1. Light scope: #A8362A. */
  --ov-teal-graphic: #7BC9C4; /* Teal for lines, rings and bars that need 3 to 1 against the surface. Light scope: #2E8C86 (3.51 to 1 on paper). */
  --ov-amber-graphic: #E3B873; /* Amber for lines and rings. Light scope: #9A6410 (4.35 to 1 on paper). */
  --ov-on-fill: #11171D; /* Text on any teal or amber fill, weight 600. Same as --ov-ink-on-accent. */

  /* ---- Light surface set (applied by the .ov-light scope below; listed here so the values are tokens too) ---- */
  --ov-l-ground: #EAF0F4; /* Paper. Never #FFF. */
  --ov-l-ground-tint: #DDE6EC; /* A second band or a recessed area on paper. */
  --ov-l-card: #F6F9FB; /* Card on paper. */
  --ov-l-ink: #11171D; /* 15.69 to 1 on paper. */
  --ov-l-ink-soft: #3A4753; /* 8.28 to 1 on paper. */
  --ov-l-mute: #566472; /* 5.28 to 1 on paper, 4.80 on the tint. */
  --ov-l-teal-text: #1B635E; /* 6.10 to 1 on paper, 6.64 on a card. */
  --ov-l-amber-text: #7A4F0E; /* 6.19 to 1 on paper, 6.73 on a card. */
  --ov-l-crit-text: #A8362A; /* 5.66 to 1 on paper. */
  --ov-l-teal-graphic: #2E8C86; /* 3.51 to 1 on paper. */
  --ov-l-amber-graphic: #9A6410; /* 4.35 to 1 on paper. */
  --ov-l-amber-wash: #F9F1E2; /* Warm card for a "needs you" object on paper: 6.34 to 1 with amber text. */

  /* ---- Type, page scale (briefing, recap, technical pages) ---- */
  --ov-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Code blocks and inline code only. The only second family. */
  --ov-fs-hero: clamp(40px, 6.2vw, 88px); /* Briefing hero line, 500, -.04em, line 1. */
  --ov-fs-h2: clamp(32px, 4.6vw, 56px); /* Chapter title, 500, -.02em, line 1.04. */
  --ov-fs-stmt: clamp(22px, 2.7vw, 34px); /* A stated beat, 500, -.02em, line 1.22. */
  --ov-fs-lede-lg: clamp(18px, 1.9vw, 24px); /* Hero lede. */
  --ov-fs-figure-page: clamp(44px, 5.4vw, 64px); /* A page figure. */
  --ov-fs-figure-md: 40px; /* An app KPI figure. */
  --ov-fs-figure-sm: 28px; /* A figure inside a table row or a compact card. */
  --ov-fs-code: 13.5px; /* Code. */

  /* ---- Spacing, page rhythm (added to the Live steps) ---- */
  --ov-sp-28: 28px; /* Pull-quote left padding, large option padding. */
  --ov-sp-40: 40px; /* Large block gap. */
  --ov-sp-48: 48px; /* Largest block gap. */
  --ov-sp-64: 64px; /* Chapter gap on a phone. */
  --ov-sp-96: 96px; /* Chapter gap on a laptop. */
  --ov-sp-128: 128px; /* Chapter gap, largest. */

  /* ---- Radius, bands ---- */
  --ov-r-band: clamp(24px, 3.5vw, 44px); /* A light band inside a dark page. */
  --ov-r-phone: 36px; /* A phone frame in a mockup. */

  /* ---- Layout, page widths (breakpoints in the comment below the block) ---- */
  --ov-wrap-page: 1180px; /* Briefing, recap, technical page, this book. */
  --ov-wrap-read: 1000px; /* Decision board and phone-first pages. */
  --ov-wrap-app: 1440px; /* App shell at laptop width. */
  --ov-sidebar-w: 248px; /* App sidebar. */
  --ov-panel-w: 420px; /* App side panel (the same width as the tracker column). */

  /* ---- Control sizes ---- */
  --ov-h-sm: 30px; /* Small button. */
  --ov-h-md: 34px; /* Default pill button. */
  --ov-h-lg: 38px; /* Large pill button. */
  --ov-h-touch: 44px; /* Anything a thumb presses on a phone. */
  --ov-h-field: 44px; /* Text field, select. */

  /* ---- Motion, page grammar (added to the Live timings) ---- */
  --ov-dur-hero: 700ms; /* Hero lines rising on load, staggered 120 to 600ms. */
  --ov-dur-line: 900ms; /* A pull-quote edge or a road line growing. */
  --ov-dur-fill: 1300ms; /* A bar filling once. */
  --ov-dur-count: 1100ms; /* A figure counting up once. */
  --ov-dur-draw: 1800ms; /* A seal ring drawing once. */
  --ov-loop-drift: 18s; /* Ambient hero ring drift. Hero only. */
  --ov-loop-halo: 7s; /* Ambient hero halo. Hero only. */
  --ov-rise-y: 16px; /* Reveal distance on a briefing page (18px on a story page). */

  /* ---- Focus and state ---- */
  --ov-focus: 2px solid #7BC9C4; /* Outline for :focus-visible, offset 3px. Light scope: #1B635E. */

  /* ---- Iconography ---- */
  --ov-icon-stroke: 2.2; /* Stroke width on a 24 unit grid, round caps and joins. */
  --ov-icon-sm: 16px; /* Small icon. */
  --ov-icon-md: 20px; /* Default icon. */
  --ov-icon-lg: 24px; /* Large icon. */

  /* ---- Code (accents and ink only: no third hue) ---- */
  --ov-code-bg: #0B1116; /* Code block ground (the deep slate). */
  --ov-code-ink: #EAF0F4;
  --ov-code-key: #A9DDD9; /* Keywords, property names. */
  --ov-code-str: #E3B873; /* Strings. */
  --ov-code-num: #7BC9C4; /* Numbers, literals. */
  --ov-code-com: #7F909E; /* Comments. */

  /* ---- Series, for charts (max 4; coral never in a series) ---- */
  --ov-series-1: #7BC9C4; /* Chart series 1 (teal). */
  --ov-series-2: #E3B873; /* Chart series 2 (amber). */
  --ov-series-3: #A8B7C3; /* Chart series 3 (cool grey). */
  --ov-series-4: #7F909E; /* Chart series 4 (mute grey). */
}

/* ---- Breakpoints (use literally in @media): 720px (stack, compact pill), 860px (briefing columns open), 1100px (tracker and app panel dock), 1700px (room display, 3 columns). ---- */

/* ---- Ground (apply to body): slate with the lift and 2 warmth radials. No grain, no image. ---- */
.ov-ground{
  background:
    radial-gradient(1200px 640px at 62% -10%, var(--ov-lift), transparent 70%),
    radial-gradient(760px 520px at 102% 72%, var(--ov-warm-amber), transparent 70%),
    radial-gradient(820px 620px at -4% 104%, var(--ov-warm-teal), transparent 70%),
    var(--ov-ground);
  color: var(--ov-ink); font-family: var(--ov-font); -webkit-font-smoothing: antialiased;
}

/* ---- Glass (apply to any card): frosted where supported, solid slate everywhere else. ---- */
.ov-glass{
  background: var(--ov-glass-solid); border: 1px solid var(--ov-glass-line);
  border-radius: var(--ov-r-card); box-shadow: var(--ov-shadow-card);
}

/* ---- Eyebrow: the informational layer (tracked caps in TT Norms Pro 600). ---- */
.ov-eyebrow{ font: var(--ov-fw-semi) var(--ov-fs-eyebrow)/1 var(--ov-font); letter-spacing: var(--ov-track-eyebrow); text-transform: uppercase; color: var(--ov-teal-text); }

/* ---- Light scope: a band or a whole page on paper. It re-points the role tokens; components written with role tokens need nothing else.
   Glass becomes a solid card on paper (no blur: blur needs light behind it). Never #FFF, never #000. ---- */
.ov-light{
  color-scheme: light;
  --ov-ground: var(--ov-l-ground); --ov-ground-deep: var(--ov-l-ground-tint); --ov-surface: var(--ov-l-card);
  --ov-glass: var(--ov-l-card); --ov-glass-solid: var(--ov-l-card);
  --ov-glass-line: rgba(17,23,29,.14); --ov-glass-hi: rgba(255,255,255,.6);
  --ov-well: rgba(17,23,29,.05);
  --ov-line: rgba(27,99,94,.28); --ov-line-soft: rgba(17,23,29,.12);
  --ov-ink: var(--ov-l-ink); --ov-ink-soft: var(--ov-l-ink-soft); --ov-mute: var(--ov-l-mute);
  --ov-teal-soft: var(--ov-l-teal-text); --ov-teal-text: var(--ov-l-teal-text); --ov-amber-text: var(--ov-l-amber-text); --ov-crit-text: var(--ov-l-crit-text);
  --ov-teal-graphic: var(--ov-l-teal-graphic); --ov-amber-graphic: var(--ov-l-amber-graphic);
  --ov-teal-tint: rgba(123,201,196,.30); --ov-teal-edge: rgba(27,99,94,.55);
  --ov-amber-tint: rgba(227,184,115,.30); --ov-amber-edge: rgba(122,79,14,.5);
  --ov-shadow-card: 0 14px 32px rgba(17,23,29,.10), inset 0 1px 0 var(--ov-glass-hi);
  --ov-focus: 2px solid #1B635E;
  --ov-code-bg: #11171D;
  background: var(--ov-l-ground); color: var(--ov-l-ink);
}
.ov-band{ border-radius: var(--ov-r-band); }

/* ---- Motion keyframes (optional). Wrap uses in prefers-reduced-motion: no-preference or set animation: none under reduce. ---- */
@keyframes ov-breathe{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.55; transform:scale(.82) } }
@keyframes ov-glow{ 0%,100%{ box-shadow: var(--ov-shadow-card), 0 0 0 0 rgba(227,184,115,0) } 50%{ box-shadow: var(--ov-shadow-card), var(--ov-glow-ready) } }
@keyframes ov-fresh{ 0%,100%{ box-shadow: var(--ov-shadow-fresh) } 50%{ box-shadow: 0 0 0 4px rgba(227,184,115,.26), 0 8px 22px rgba(0,0,0,.35) } }
@keyframes ov-flow{ 0%{ transform: translateX(-100%) } 100%{ transform: translateX(260%) } }
@keyframes ov-shimmer{ 0%{ transform: translateX(-100%) } 60%,100%{ transform: translateX(100%) } }
@keyframes ov-rise{ from{ opacity:0; transform: translateY(12px) } to{ opacity:1; transform:none } }
@keyframes ov-pill-halo{ 0%,100%{ box-shadow: 0 0 0 0 rgba(123,201,196,.42), 0 8px 22px rgba(34,51,40,.2) } 50%{ box-shadow: 0 0 0 9px rgba(123,201,196,0), 0 8px 22px rgba(34,51,40,.2) } }
@keyframes ov-pill-enter{ from{ opacity:0; transform: translateY(-10px) scale(.96) } to{ opacity:1; transform:none } }
@keyframes ov-ring{ 0%{ opacity:0; transform: scale(.985) } 14%{ opacity:1; transform: scale(1) } 70%{ opacity:.85 } 100%{ opacity:0 } }
@keyframes ov-sweep{ to{ transform: translateX(260%) skewX(-12deg) } }
@keyframes ov-draw{ from{ stroke-dashoffset: 100 } to{ stroke-dashoffset: 0 } }
@keyframes ov-drift{ from{ transform: translate(0,0) scale(1) } to{ transform: translate(-18px,12px) scale(1.05) } }
@keyframes ov-halo{ 0%,100%{ opacity:.55; transform: scale(1) } 50%{ opacity:1; transform: scale(1.07) } }
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important } }

/* ---- Ovae Live aliases: every --ol-* name from ovae-live-tokens.css resolves to its --ov-* twin (a prefix swap), so an Ovae Live page can link this file instead and keep working. Delete once the page uses --ov-* names. ---- */
:root{
  --ol-ground: var(--ov-ground);
  --ol-ground-deep: var(--ov-ground-deep);
  --ol-surface: var(--ov-surface);
  --ol-glass: var(--ov-glass);
  --ol-glass-solid: var(--ov-glass-solid);
  --ol-glass-line: var(--ov-glass-line);
  --ol-glass-hi: var(--ov-glass-hi);
  --ol-well: var(--ov-well);
  --ol-line: var(--ov-line);
  --ol-line-soft: var(--ov-line-soft);
  --ol-lift: var(--ov-lift);
  --ol-warm-amber: var(--ov-warm-amber);
  --ol-warm-teal: var(--ov-warm-teal);
  --ol-ink: var(--ov-ink);
  --ol-ink-soft: var(--ov-ink-soft);
  --ol-mute: var(--ov-mute);
  --ol-ink-on-accent: var(--ov-ink-on-accent);
  --ol-teal: var(--ov-teal);
  --ol-teal-soft: var(--ov-teal-soft);
  --ol-teal-tint: var(--ov-teal-tint);
  --ol-teal-edge: var(--ov-teal-edge);
  --ol-amber: var(--ov-amber);
  --ol-amber-lite: var(--ov-amber-lite);
  --ol-amber-tint: var(--ov-amber-tint);
  --ol-amber-edge: var(--ov-amber-edge);
  --ol-crit: var(--ov-crit);
  --ol-font: var(--ov-font);
  --ol-fs-micro: var(--ov-fs-micro);
  --ol-fs-eyebrow: var(--ov-fs-eyebrow);
  --ol-fs-caption: var(--ov-fs-caption);
  --ol-fs-small: var(--ov-fs-small);
  --ol-fs-ui: var(--ov-fs-ui);
  --ol-fs-body: var(--ov-fs-body);
  --ol-fs-lede: var(--ov-fs-lede);
  --ol-fs-sentence: var(--ov-fs-sentence);
  --ol-fs-panel: var(--ov-fs-panel);
  --ol-fs-brand: var(--ov-fs-brand);
  --ol-fs-title: var(--ov-fs-title);
  --ol-fs-figure: var(--ov-fs-figure);
  --ol-fs-figure-lg: var(--ov-fs-figure-lg);
  --ol-fw-regular: var(--ov-fw-regular);
  --ol-fw-medium: var(--ov-fw-medium);
  --ol-fw-semi: var(--ov-fw-semi);
  --ol-fw-bold: var(--ov-fw-bold);
  --ol-track-figure: var(--ov-track-figure);
  --ol-track-brand: var(--ov-track-brand);
  --ol-track-title: var(--ov-track-title);
  --ol-track-eyebrow: var(--ov-track-eyebrow);
  --ol-track-tag: var(--ov-track-tag);
  --ol-lh-display: var(--ov-lh-display);
  --ol-lh-body: var(--ov-lh-body);
  --ol-lh-lede: var(--ov-lh-lede);
  --ol-r-control: var(--ov-r-control);
  --ol-r-row: var(--ov-r-row);
  --ol-r-card: var(--ov-r-card);
  --ol-r-pill: var(--ov-r-pill);
  --ol-r-bar: var(--ov-r-bar);
  --ol-blur-card: var(--ov-blur-card);
  --ol-blur-pill: var(--ov-blur-pill);
  --ol-shadow-card: var(--ov-shadow-card);
  --ol-shadow-float: var(--ov-shadow-float);
  --ol-shadow-announce: var(--ov-shadow-announce);
  --ol-shadow-pop: var(--ov-shadow-pop);
  --ol-shadow-fresh: var(--ov-shadow-fresh);
  --ol-glow-ready: var(--ov-glow-ready);
  --ol-glow-now: var(--ov-glow-now);
  --ol-glow-edit: var(--ov-glow-edit);
  --ol-overlay: var(--ov-overlay);
  --ol-sp-4: var(--ov-sp-4);
  --ol-sp-6: var(--ov-sp-6);
  --ol-sp-8: var(--ov-sp-8);
  --ol-sp-10: var(--ov-sp-10);
  --ol-sp-12: var(--ov-sp-12);
  --ol-sp-14: var(--ov-sp-14);
  --ol-sp-16: var(--ov-sp-16);
  --ol-sp-18: var(--ov-sp-18);
  --ol-sp-20: var(--ov-sp-20);
  --ol-sp-22: var(--ov-sp-22);
  --ol-sp-24: var(--ov-sp-24);
  --ol-sp-32: var(--ov-sp-32);
  --ol-sp-36: var(--ov-sp-36);
  --ol-wrap: var(--ov-wrap);
  --ol-wrap-display: var(--ov-wrap-display);
  --ol-pad-x: var(--ov-pad-x);
  --ol-tracker-w: var(--ov-tracker-w);
  --ol-tracker-w-display: var(--ov-tracker-w-display);
  --ol-card-min: var(--ov-card-min);
  --ol-ease: var(--ov-ease);
  --ol-ease-out: var(--ov-ease-out);
  --ol-ease-pop: var(--ov-ease-pop);
  --ol-dur-fast: var(--ov-dur-fast);
  --ol-dur-state: var(--ov-dur-state);
  --ol-dur-med: var(--ov-dur-med);
  --ol-dur-bar: var(--ov-dur-bar);
  --ol-dur-slow: var(--ov-dur-slow);
  --ol-dur-rise: var(--ov-dur-rise);
  --ol-loop-breathe: var(--ov-loop-breathe);
  --ol-loop-glow: var(--ov-loop-glow);
  --ol-loop-fresh: var(--ov-loop-fresh);
  --ol-loop-shimmer: var(--ov-loop-shimmer);
  --ol-loop-flow: var(--ov-loop-flow);
  --ol-loop-pill: var(--ov-loop-pill);
  --ol-loop-rim: var(--ov-loop-rim);
  --ol-ring: var(--ov-ring);
  --ol-aurora: var(--ov-aurora);
}