/* ============================================================
   tokens.css — the single source of truth for every design value
   used across ClinCog. No hex, no shadow value, no font stack is
   hardcoded outside this file.

   ALPHA — "Paper & Ink"
   An editorial system: a quiet serif voice for headings over a
   near-achromatic paper canvas, flat mist cards instead of bordered
   white boxes, one warm clay accent used sparingly, and each case
   carrying its own paper-and-ink pair. See styleguide.html and
   DESIGN.md for the rules behind every value below.

   Fonts, all self-hosted (latin + latin-ext, needed for Romanian):
   - Newsreader (variable, opsz 6-72, wght 200-800, roman + italic)
     display serif. Optical sizing is automatic, so the same file
     draws a display cut at 44px and a text cut at 18px.
   - Inter (variable, wght 100-900) body and UI. The variable axis is
     what allows the half-step weights (450, 480) the system uses.
   - DM Mono: indices, codes, figures on charts.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-var-latin.woff2') format('woff2-variations'), url('/fonts/Inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-var-latin-ext.woff2') format('woff2-variations'), url('/fonts/Inter-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-latin-normal.woff2') format('woff2-variations'), url('/fonts/Newsreader-latin-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-latin-ext-normal.woff2') format('woff2-variations'), url('/fonts/Newsreader-latin-ext-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-latin-italic.woff2') format('woff2-variations'), url('/fonts/Newsreader-latin-italic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-latin-ext-italic.woff2') format('woff2-variations'), url('/fonts/Newsreader-latin-ext-italic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/DMMono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/DMMono-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/DMMono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/DMMono-500-latin-ext.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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;
}


:root {
  /* ---- Palette ----
     Every colour below is taken verbatim from the two reference systems
     (Steep: ink black, paper, mist, fog, slate, ash, smoke, blush peach,
     sienna. Ventriloc: graphite, steel, mist, ivory, ember, brass). No
     in-between tints are invented; where a role needs a value, it is
     mapped to the nearest reference swatch. */
  --paper: #ffffff;         /* Steep paper white */
  --mist: #f2f2f3;          /* Steep mist gray - card surface */
  --mist-strong: #e8e8e8;   /* Ventriloc mist - hover, tracks */
  --fog: #fafafb;           /* Steep fog white - sidebar, bands */
  --ivory: #ebe6dd;         /* Ventriloc ivory */
  --hairline: #e8e8e8;      /* Ventriloc mist */
  --hairline-on-mist: #e8e8e8;

  --bg-app: var(--paper);
  --bg-surface: var(--paper);
  --bg-surface-alt: var(--mist);
  --bg-card: var(--mist);
  --bg-elevated: var(--paper);
  --border: var(--hairline);

  --text-primary: #17191c;      /* Steep ink black - 17.6:1 */
  --text-secondary: #4d4d4d;    /* Ventriloc steel - 8.5:1 paper, 7.6:1 mist */
  --text-tertiary: #777b86;     /* Steep slate gray - 4.2:1 paper, 3.8:1 mist */
  --text-placeholder: #a3a6af;  /* Steep smoke gray */
  --slate: #4d4d4d;

  /* ---- Ink: the only dark surface ---- */
  --ink: #17191c;
  --ink-hover: #202020;         /* Ventriloc graphite */
  --ink-text: #ffffff;

  /* ---- Accent: Ventriloc ember, with Steep's peach/sienna pair ----
     Ember is for graphics only - link underlines, focus rings, progress
     fills, chart strokes, the "current step" dot. Text that needs the
     accent uses sienna. */
  /* Alpha r3: the ember accent is retired - it fought the rest of the
     palette. The system accent is now Steep's sienna-on-peach pair, the
     same pair Dennis wears, so no colour in the app sits outside the case
     colours. */
  --accent: #5d2a1a;         /* Steep sienna - lines, fills, focus */
  --accent-hover: #17191c;
  --accent-soft: #fbe1d1;    /* Steep blush peach */
  --accent-ink: #5d2a1a;     /* Steep sienna brown - 11.6:1 */
  --accent-deep: #5d2a1a;    /* sienna on peach - 9.3:1 */

  /* ---- Cases: four surfaces the references actually contain ----
     base = dots, bars, chart strokes; soft = the case's surface;
     ink = text on that surface; action/action-text = a primary button
     placed on that surface (Darren's surface is dark, so his inverts). */
  --domain-psychosis: #5d2a1a;        /* sienna */
  --domain-psychosis-soft: #fbe1d1;   /* blush peach */
  --domain-psychosis-ink: #5d2a1a;    /* sienna - 9.3:1 */
  --domain-psychosis-action: #17191c;
  /* line = the case's stroke colour: progress bars, chart lines, dots.
     Always the darker member of the pair, so it reads on paper. */
  --domain-psychosis-line: #5d2a1a;
  --domain-mood-line: #202020;
  --domain-anxiety-line: #4d4d4d;
  --domain-substance-line: #816729;
  /* tint = a light surface that always takes the line colour as text:
     semantic badges and marks on a case page. Darren's own surface is
     graphite, so his tint is Ventriloc mist. */
  --domain-psychosis-tint: #fbe1d1;
  --domain-mood-tint: #e8e8e8;
  --domain-anxiety-tint: #e8e8e8;
  --domain-substance-tint: #ebe6dd;
  --domain-psychosis-action-text: #ffffff;

  --domain-mood: #202020;             /* graphite */
  --domain-mood-soft: #202020;        /* graphite surface */
  --domain-mood-ink: #ffffff;         /* paper - 16.3:1 */
  --domain-mood-action: #ffffff;
  --domain-mood-action-text: #17191c;

  --domain-anxiety: #777b86;          /* slate gray */
  --domain-anxiety-soft: #e8e8e8;     /* Ventriloc mist */
  --domain-anxiety-ink: #4d4d4d;      /* steel - 7.0:1 */
  --domain-anxiety-action: #17191c;
  --domain-anxiety-action-text: #ffffff;

  --domain-substance: #816729;        /* brass */
  --domain-substance-soft: #ebe6dd;   /* ivory */
  --domain-substance-ink: #816729;    /* brass on ivory - 4.3:1 */
  --domain-substance-action: #17191c;
  --domain-substance-action-text: #ffffff;

  /* ---- Semantic states, mapped onto the same swatches ---- */
  --success: #17191c;  --success-soft: #f2f2f3;
  --warning: #816729;  --warning-soft: #ebe6dd;
  --danger: #5d2a1a;   --danger-soft: #fbe1d1;
  --info: #4d4d4d;     --info-soft: #efefef;

  /* ---- Shape ----
     Two structural radii: 24px for content cards, pill for every
     control. 16px for small cards and inputs, 12px for images. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-card: 24px;
  --radius-pill: 999px;

  /* ---- Elevation ----
     Content cards never cast a shadow. Only floating things do: the
     chat window, popovers, modals, the toast, the accessibility button. */
  --shadow-xs: 0 0 0 1px rgba(4,23,43,.05);
  --shadow-sm: 0 0 0 1px rgba(0,0,0,.05), 0 4px 24px rgba(0,0,0,.06);
  --shadow-md: 0 0 0 1px rgba(0,0,0,.05), 0 8px 40px rgba(0,0,0,.09);
  --shadow-lg: 0 0 0 1px rgba(4,23,43,.05), 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.08);

  /* ---- Spacing: 4px base, generous upper steps ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;
  --sp-9: 64px; --sp-10: 80px;
  --section-gap: clamp(48px, 36px + 3vw, 80px);

  /* ---- Typography ---- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* --font-serif is the literal; --font-display points at it. Some pages
     re-declare --font-display locally (addiction-eval maps it to sans),
     so shared rules that must stay serif use --font-serif. */
  --font-serif: 'Newsreader', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-display: var(--font-serif);
  --font-mono: 'DM Mono', ui-monospace, monospace;

  --measure: none;   /* text runs the full width of its box */

  --topbar-h: 72px;
  --topbar-gap: 12px;

  /* Roles. Display and headings are serif at weight 400 - the restraint
     is the signature; hierarchy comes from size and tracking, never
     from bold. Body is Inter at 400, UI at 480-500. */
  --text-display-size: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);         /* 40-64 */
  --text-display-spacing: -.025em;
  --text-metric-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); --text-metric-weight: 400; --text-metric-lh: 1; --text-metric-spacing: -.02em;
  --text-page-title-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); --text-page-title-weight: 400; --text-page-title-lh: 1.12; --text-page-title-spacing: -.02em;
  --text-section-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --text-card-title-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); --text-card-title-weight: 400; --text-card-title-lh: 1.2; --text-card-title-spacing: -.012em;
  --text-body-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); --text-body-weight: 400; --text-body-lh: 1.6;
  --text-label-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); --text-label-weight: 480; --text-label-lh: 1.4; --text-label-spacing: 0;
  --text-eyebrow-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); --text-eyebrow-weight: 450; --text-eyebrow-spacing: 0;

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --text-display: var(--text-display-size);
  --text-subtitle-size: var(--text-base);

  /* ---- Sidebar: now part of the page, not a dark slab. It follows
     the theme, sits on fog, and marks the active item with a paper
     pill - the Ventriloc nav-pill idea turned vertical. ---- */
  --sidebar-bg: var(--fog);
  --sidebar-bg-active: var(--paper);
  --sidebar-bg-hover: var(--mist);
  --sidebar-text: var(--text-secondary);
  --sidebar-text-active: var(--text-primary);
  --sidebar-border: var(--hairline);
  --sidebar-eyebrow: var(--text-tertiary);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --duration-hover: 160ms;
  --duration-layout: 260ms;
  --duration-progress: 500ms;

  /* ---- Selection: a chosen answer is inked. Monochrome, unmistakable,
     and never confused with a case colour or a warning. ---- */
  --select: var(--ink);
  --select-line: var(--ink);
  --select-ink: var(--text-primary);
  --select-fill: var(--mist-strong);
  --select-ring: color-mix(in srgb, var(--ink) 14%, transparent);
  --select-solid: var(--ink);
  --select-on: var(--ink-text);
}

/* Dark: warm near-black paper, same roles. Declared twice - once for
   an explicit choice, once for the system preference - from one source
   (this file is generated that way; edit both blocks together). */
html[data-theme="dark"] {
  --paper: #17191c;
  --mist: #202020;
  --mist-strong: #2b2b2b;
  --fog: #202020;
  --ivory: rgba(235,230,221,.12);
  --hairline: #2b2b2b;
  --hairline-on-mist: #333333;

  --text-primary: #fafafb;
  --text-secondary: #a3a6af;
  --text-tertiary: #979799;
  --text-placeholder: #777b86;
  --slate: #a3a6af;

  --ink: #fafafb;
  --ink-hover: #ffffff;
  --ink-text: #17191c;

  --accent: #fbe1d1;
  --accent-hover: #fbe1d1;
  --accent-soft: rgba(251,225,209,.12);
  --accent-ink: #fbe1d1;
  --accent-deep: #fbe1d1;

  --domain-psychosis: #fbe1d1;
  --domain-psychosis-soft: rgba(251,225,209,.12);
  --domain-psychosis-ink: #fbe1d1;
  --domain-psychosis-action: #fafafb;
  --domain-psychosis-line: #fbe1d1;
  --domain-mood-line: #efefef;
  --domain-anxiety-line: #a3a6af;
  --domain-substance-line: #ebe6dd;
  --domain-psychosis-tint: rgba(251,225,209,.12);
  --domain-mood-tint: rgba(255,255,255,.08);
  --domain-anxiety-tint: rgba(255,255,255,.08);
  --domain-substance-tint: rgba(235,230,221,.12);
  --domain-psychosis-action-text: #17191c;
  --domain-mood: #e8e8e8;
  --domain-mood-soft: #efefef;
  --domain-mood-ink: #17191c;
  --domain-mood-action: #17191c;
  --domain-mood-action-text: #fafafb;
  --domain-anxiety: #979799;
  --domain-anxiety-soft: rgba(255,255,255,.08);
  --domain-anxiety-ink: #e8e8e8;
  --domain-anxiety-action: #fafafb;
  --domain-anxiety-action-text: #17191c;
  --domain-substance: #816729;
  --domain-substance-soft: rgba(235,230,221,.12);
  --domain-substance-ink: #ebe6dd;
  --domain-substance-action: #fafafb;
  --domain-substance-action-text: #17191c;

  --success: #fafafb; --success-soft: rgba(255,255,255,.08);
  --warning: #ebe6dd; --warning-soft: rgba(235,230,221,.12);
  --danger: #fbe1d1;  --danger-soft: rgba(251,225,209,.12);
  --info: #a3a6af;    --info-soft: rgba(255,255,255,.06);

  --shadow-xs: 0 0 0 1px rgba(255,255,255,.05);
  --shadow-sm: 0 0 0 1px rgba(255,255,255,.06), 0 4px 24px rgba(0,0,0,.35);
  --shadow-md: 0 0 0 1px rgba(255,255,255,.06), 0 8px 40px rgba(0,0,0,.45);
  --shadow-lg: 0 0 0 1px rgba(255,255,255,.07), 0 20px 25px -5px rgba(0,0,0,.5), 0 8px 10px -6px rgba(0,0,0,.4);

  --sidebar-bg: var(--fog);
  --sidebar-bg-active: var(--mist-strong);
  --sidebar-bg-hover: var(--mist);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --paper: #17191c;
    --mist: #202020;
    --mist-strong: #2b2b2b;
    --fog: #202020;
    --ivory: rgba(235,230,221,.12);
    --hairline: #2b2b2b;
    --hairline-on-mist: #333333;

    --text-primary: #fafafb;
    --text-secondary: #a3a6af;
    --text-tertiary: #979799;
    --text-placeholder: #777b86;
    --slate: #a3a6af;

    --ink: #fafafb;
    --ink-hover: #ffffff;
    --ink-text: #17191c;

    --accent: #fbe1d1;
    --accent-hover: #fbe1d1;
    --accent-soft: rgba(251,225,209,.12);
    --accent-ink: #fbe1d1;
    --accent-deep: #fbe1d1;

    --domain-psychosis: #fbe1d1;
    --domain-psychosis-soft: rgba(251,225,209,.12);
    --domain-psychosis-ink: #fbe1d1;
    --domain-psychosis-action: #fafafb;
    --domain-psychosis-line: #fbe1d1;
    --domain-mood-line: #efefef;
    --domain-anxiety-line: #a3a6af;
    --domain-substance-line: #ebe6dd;
    --domain-psychosis-tint: rgba(251,225,209,.12);
    --domain-mood-tint: rgba(255,255,255,.08);
    --domain-anxiety-tint: rgba(255,255,255,.08);
    --domain-substance-tint: rgba(235,230,221,.12);
    --domain-psychosis-action-text: #17191c;
    --domain-mood: #e8e8e8;
    --domain-mood-soft: #efefef;
    --domain-mood-ink: #17191c;
    --domain-mood-action: #17191c;
    --domain-mood-action-text: #fafafb;
    --domain-anxiety: #979799;
    --domain-anxiety-soft: rgba(255,255,255,.08);
    --domain-anxiety-ink: #e8e8e8;
    --domain-anxiety-action: #fafafb;
    --domain-anxiety-action-text: #17191c;
    --domain-substance: #816729;
    --domain-substance-soft: rgba(235,230,221,.12);
    --domain-substance-ink: #ebe6dd;
    --domain-substance-action: #fafafb;
    --domain-substance-action-text: #17191c;

    --success: #fafafb; --success-soft: rgba(255,255,255,.08);
    --warning: #ebe6dd; --warning-soft: rgba(235,230,221,.12);
    --danger: #fbe1d1;  --danger-soft: rgba(251,225,209,.12);
    --info: #a3a6af;    --info-soft: rgba(255,255,255,.06);

    --shadow-xs: 0 0 0 1px rgba(255,255,255,.05);
    --shadow-sm: 0 0 0 1px rgba(255,255,255,.06), 0 4px 24px rgba(0,0,0,.35);
    --shadow-md: 0 0 0 1px rgba(255,255,255,.06), 0 8px 40px rgba(0,0,0,.45);
    --shadow-lg: 0 0 0 1px rgba(255,255,255,.07), 0 20px 25px -5px rgba(0,0,0,.5), 0 8px 10px -6px rgba(0,0,0,.4);

    --sidebar-bg: var(--fog);
    --sidebar-bg-active: var(--mist-strong);
    --sidebar-bg-hover: var(--mist);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-hover: 1ms;
    --duration-layout: 1ms;
    --duration-progress: 1ms;
  }
}

@media (max-width: 1023px) {
  :root, html { --topbar-h: 62px; }
}

/* ---------------------------------------------------------------
   Toast surface. Inverts with the theme: an ink pill on a light
   page, a lifted warm grey on a dark one. See toast.js.
--------------------------------------------------------------- */
:root, html {
  --toast-bg: rgba(23,25,28,.92);
  --toast-fg: #fafafb;
  --toast-fg-dim: rgba(250,250,251,.64);
  --toast-mark: #fbe1d1;
  --toast-ring: rgba(255,255,255,.10);
  --toast-track: rgba(255,255,255,.12);
}
html[data-theme="dark"] {
  --toast-bg: rgba(46,44,41,.92);
  --toast-fg: #fafafb;
  --toast-fg-dim: rgba(250,250,251,.60);
  --toast-mark: #fbe1d1;
  --toast-ring: rgba(255,255,255,.14);
  --toast-track: rgba(255,255,255,.14);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --toast-bg: rgba(46,44,41,.92);
    --toast-fg: #fafafb;
    --toast-fg-dim: rgba(250,250,251,.60);
    --toast-mark: #fbe1d1;
    --toast-ring: rgba(255,255,255,.14);
    --toast-track: rgba(255,255,255,.14);
  }
}