/* ============================================================
   OATH LIGHT — DESIGN TOKENS
   Single source of truth for color, type, spacing, radii, shadow,
   and motion across all four surfaces:

     - extension/popup_assets/popup.css     (browser action popup)
     - extension/blocklist_assets/*.css     (blocked page, options)
     - desktop-app/src/renderer/styles.css  (Tauri desktop renderer)
     - website (Oath-light.github.io) + store assets

   HOW SURFACES CONSUME THIS FILE
   -------------------------------
   The extension has NO BUILD STEP (plain files, no bundler, no npm),
   so there is no import/copy tooling here either. Each surface pulls
   this file in the way that fits its own constraints:

     - Desktop renderer: <link rel="stylesheet" href="../../../design-system/tokens.css">
       or copy tokens.css + fonts/ into the renderer dir if a relative
       link across the Tauri asset boundary isn't allowed.
     - Extension (popup/blocked/options): COPY tokens.css and the
       fonts/ folder verbatim into each *_assets directory (matching
       the existing popup_assets/fonts, blocklist_assets/fonts
       pattern). The @font-face `src: url('./fonts/...')` paths are
       relative to THIS file, so fonts/ must travel alongside it
       wherever tokens.css is copied.
     - Website: copy tokens.css + fonts/ into the site's asset dir,
       same rule as above.

   Any copy MUST stay byte-identical to this file (or be regenerated
   via design-system/preview.html's "Download tokens.css" export) —
   do not hand-edit copies independently or the surfaces drift apart
   again, which is the exact problem this file exists to solve.

   THEMING MODEL
   -------------
   :root                    -> DARK theme values (the app is dark-first)
   [data-theme="light"]     -> light theme overrides
   [data-serious]           -> Serious Mode hook, layered on top of
                                whichever theme is active (same
                                attribute-selector specificity as
                                [data-theme], source order makes it win)

   Noir is the ONLY built-in theme (owner decision 2026-07-19) — there
   are no preset palette variants, here or anywhere else. User-custom
   themes are a runtime feature instead: the app's Themes menu lets the
   user edit any color token directly, applied as inline custom-property
   overrides on top of these defaults — the same mechanism preview.html
   uses for editing. This file always stays Noir.

   All tokens are prefixed --ol- to avoid collisions with per-surface
   local custom properties.
   ============================================================ */

/* ============================================================
   FONT FACES
   Family: Manrope. One typeface across every surface — a display serif
   was removed here on purpose, so nothing can drift back to two.
   Subset declarations copied verbatim from desktop-app's build output
   so unicode-range coverage (latin, latin-ext, cyrillic, greek,
   vietnamese) matches exactly. Files copied into ./fonts/.
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/7c1abc78.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/147faed1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/1c96cabf.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/c926b65e.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/f1d3ec0b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/dad320eb.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/7c1abc78.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/147faed1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/1c96cabf.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/c926b65e.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/f1d3ec0b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/dad320eb.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/7c1abc78.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/147faed1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/1c96cabf.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/c926b65e.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/f1d3ec0b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/dad320eb.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/7c1abc78.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/147faed1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/1c96cabf.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/c926b65e.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/f1d3ec0b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/dad320eb.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/7c1abc78.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/147faed1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/1c96cabf.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/c926b65e.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/f1d3ec0b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/dad320eb.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   DARK THEME (default) — app is dark-first, so :root carries these.
   Values below are the "Noir" palette, promoted from one style variant
   among seven to the single baseline default (the other six, and the
   `data-style` attribute that selected between them, are gone). bg-2/bg-3
   (raised surface tiers) and the semantic ok/warn/danger colors are
   new — Noir only defined two background tiers and borrowed
   ok/warn/danger ad hoc from inline hex codes scattered through
   styles.css (#d9534f danger, #d9a441 warn). Those exact hexes are
   reused here so status colors don't shift when the design system
   lands.
   ============================================================ */
:root {
  /* ---- color: background layers (0 = deepest, 3 = most raised) ---- */
  --ol-bg-0: #0a0a0a;
  --ol-bg-1: #121212;
  --ol-bg-2: #1a1a1a;
  --ol-bg-3: #232323;

  /* ---- color: text tiers ---- */
  --ol-text-1: #f2f2f2;  /* primary reading text */
  --ol-text-2: #b8b8b8;  /* secondary / supporting text */
  --ol-text-3: #7a7a7a;  /* muted / tertiary, disabled-adjacent */

  /* ---- color: accent + status ---- */
  --ol-accent: #ffffff;
  --ol-accent-2: #cfcfcf;
  --ol-accent-3: #8f8f8f;
  /* Ink that sits ON an accent fill (primary button label, avatar initials,
     the user's own chat bubble). This exists because Noir's dark accent IS
     white — hardcoding #fff on an accent background made every primary
     button's label invisible. Any surface that paints var(--ol-accent) as a
     background must take its foreground from here, never from a literal. */
  --ol-accent-ink: #0a0a0a;
  --ol-ok: #3ecf8e;
  --ol-warn: #d9a441;
  --ol-danger: #e5565b;

  /* ---- color: border + focus ----
     Stored as translucent rgba (not plain hex) because these are
     meant to be composited over whatever bg tier sits beneath them,
     matching the existing app's color-mix()-at-use-site pattern.
     A raw color-mix() output can't be represented as a static color
     token, so translucency lives here instead. */
  --ol-border: rgba(255, 255, 255, 0.10);
  --ol-border-strong: rgba(255, 255, 255, 0.16);
  --ol-focus-ring: #ffffff;

  /* ---- typography: family stacks ---- */
  --ol-font-ui: 'Manrope', ui-sans-serif, system-ui, sans-serif;

  /* ---- typography: modular size scale ---- */
  --ol-size-xs: 11px;
  --ol-size-sm: 12.5px;
  --ol-size-base: 14px;
  --ol-size-md: 15.5px;
  --ol-size-lg: 18px;
  --ol-size-xl: 22px;
  --ol-size-2xl: 28px;
  --ol-size-3xl: 34px;
  --ol-size-4xl: 42px;

  /* ---- typography: weights ---- */
  --ol-weight-regular: 400;
  --ol-weight-medium: 500;
  --ol-weight-semibold: 600;
  --ol-weight-bold: 700;
  --ol-weight-black: 800;

  /* ---- typography: line-heights ---- */
  --ol-leading-tight: 1.05;
  --ol-leading-snug: 1.3;
  --ol-leading-normal: 1.55;
  --ol-leading-relaxed: 1.7;

  /* ---- spacing scale ---- */
  --ol-space-1: 4px;
  --ol-space-2: 8px;
  --ol-space-3: 12px;
  --ol-space-4: 16px;
  --ol-space-5: 20px;
  --ol-space-6: 28px;
  --ol-space-7: 36px;
  --ol-space-8: 48px;

  /* ---- radii ---- */
  --ol-radius-sm: 10px;
  --ol-radius-md: 16px;
  --ol-radius-lg: 22px;
  --ol-radius-xl: 30px;
  --ol-radius-pill: 999px;

  /* ---- shadows / elevation ---- */
  --ol-shadow-sm: 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --ol-shadow-md: 0 24px 60px -24px rgba(0, 0, 0, 0.65), 0 2px 8px -2px rgba(0, 0, 0, 0.4);

  /* --ol-blur-panel is gone. It sized the backdrop-filter on glass surfaces,
     and glass only ever read as glass because animated colour blobs sat
     behind it. Those are gone (see the GROUND section of each surface's
     stylesheet), so cards are opaque and take their lift from a shadow plus
     the hairline below. */

  /* Top-edge highlight. A 1px lit line along the top of a raised surface is
     what makes it read as a physical panel rather than a lighter rectangle.
     Near-white in light mode, i.e. invisible on a white card — correct, since
     light surfaces get their lift from the shadow instead. */
  --ol-hairline: rgba(255, 255, 255, 0.07);

  /* ---- ground: the static field behind the interface ----
     Decorative, the way --orb-* was, with the difference that nothing here
     ever moves. Each is used by one or two looks: a dot for grid grounds, a
     thread for woven and engraved ones, an edge for vignettes, and a well
     for the recessed content pane. */
  --ol-ground-dot: rgba(255, 255, 255, 0.10);
  --ol-ground-thread: rgba(255, 255, 255, 0.038);
  --ol-ground-edge: rgba(0, 0, 0, 0.62);
  --ol-ground-well: rgba(0, 0, 0, 0.85);

  /* ---- motion: durations + easings ---- */
  --ol-duration-fast: 120ms;
  --ol-duration-base: 200ms;
  --ol-duration-slow: 400ms;
  --ol-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ol-ease-spring: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   LIGHT THEME
   Color tokens only — type scale, spacing, radii, and motion are
   theme-independent by design (a single rhythm across both themes).
   Shadow color/opacity does change: dark shadows read as pure black
   falloff, light shadows need a tinted, softer falloff or they look
   like dirt on a white surface.
   ============================================================ */
[data-theme="light"] {
  --ol-bg-0: #fafafa;
  --ol-bg-1: #ffffff;
  --ol-bg-2: #f0f0f0;
  --ol-bg-3: #e8e8e8;

  --ol-text-1: #111111;
  --ol-text-2: #3d3d3d;
  --ol-text-3: #7a7a7a;

  --ol-accent: #111111;
  --ol-accent-2: #3d3d3d;
  --ol-accent-3: #6e6e6e;
  --ol-accent-ink: #fafafa;
  --ol-ok: #16a34a;
  --ol-warn: #b45309;
  --ol-danger: #c83a40;

  --ol-border: rgba(0, 0, 0, 0.10);
  --ol-border-strong: rgba(0, 0, 0, 0.16);
  --ol-focus-ring: #111111;

  --ol-shadow-sm: 0 10px 28px -16px rgba(20, 20, 20, 0.18);
  --ol-shadow-md: 0 30px 70px -30px rgba(20, 20, 20, 0.24), 0 2px 10px -4px rgba(20, 20, 20, 0.10);

  --ol-hairline: rgba(255, 255, 255, 0.95);
  --ol-ground-dot: rgba(0, 0, 0, 0.09);
  --ol-ground-thread: rgba(0, 0, 0, 0.030);
  --ol-ground-edge: rgba(0, 0, 0, 0.11);
  --ol-ground-well: rgba(20, 20, 20, 0.22);
}

/* ============================================================
   NEUTRAL TEMPER
   Noir's greys are pure achromatic. A grey carrying a slight hue
   bias reads as chosen; a pure one reads as inherited — and this
   is the largest perceptual change available at zero runtime cost,
   because it is four hex values rather than a layer, a filter or
   an animation.

   Only the background tiers move. Text, accent, status and border
   tokens are untouched, so every contrast ratio in the system is
   exactly what it was and no temper can make the interface
   unreadable. `pure` is the default and declares nothing.

   Specificity note: these carry the same weight as [data-theme],
   so the light-mode pairs below are written as two-attribute
   selectors to beat the single-attribute [data-theme="light"]
   block above regardless of source order.
   ============================================================ */
[data-neutral="cool"] {
  --ol-bg-0: #080a0c;
  --ol-bg-1: #101317;
  --ol-bg-2: #171b20;
  --ol-bg-3: #20262c;
}
[data-neutral="warm"] {
  --ol-bg-0: #0b0a08;
  --ol-bg-1: #141210;
  --ol-bg-2: #1c1917;
  --ol-bg-3: #25211d;
}
[data-theme="light"][data-neutral="cool"] {
  --ol-bg-0: #f5f7f9;
  --ol-bg-1: #ffffff;
  --ol-bg-2: #eaeef2;
  --ol-bg-3: #e0e6ec;
}
[data-theme="light"][data-neutral="warm"] {
  --ol-bg-0: #faf8f4;
  --ol-bg-1: #ffffff;
  --ol-bg-2: #f2efe9;
  --ol-bg-3: #e9e3da;
}

/* ============================================================
   SERIOUS MODE HOOK
   One attribute flips the register: harder accent (red, not neutral
   white/black), tighter radii (less soft/approachable), snappier
   motion (less soothing). Deliberately does NOT touch bg/text/border
   — serious mode changes the FEEL, not full repaint, and it must
   layer on top of either theme. Selector specificity matches
   [data-theme="..."], so source order (this block last) is what
   makes it win — keep this block below the theme blocks if this
   file is hand-edited.
   ============================================================ */
[data-serious] {
  --ol-accent: #ff3b3b;
  --ol-accent-2: #ff5e3a;
  --ol-accent-3: #c83a40;
  --ol-accent-ink: #ffffff;

  --ol-radius-sm: 6px;
  --ol-radius-md: 8px;
  --ol-radius-lg: 10px;
  --ol-radius-xl: 14px;

  --ol-duration-fast: 80ms;
  --ol-duration-base: 120ms;
  --ol-duration-slow: 200ms;
}