/* The new docs brand, as on the docs preview (pr-217.docs-preview.test.insurely.com, read
   2026-10-05): warm stone surfaces, oxblood ink, a sun-yellow primary button, GD Bauer Display
   for display headings and Geist for everything else. Light only: the page has no dark theme. */

/* primitives, and the values built straight from them */
:root {
  color-scheme: light;

  --oxblood: #290000;
  --sun: #FFD485;
  --moss: #14431F;
  --stone-50: #FBFBF9;
  --stone-100: #F8F7F3;
  --stone-200: #EBE9E0;
  --stone-300: #E6E2DB;
  --stone-400: #DEDAD3;
  --stone-600: #85827A;
  --stone-700: #66645C;
  --black: #000000;
  --white: #FFFFFF;
  --lilac: #BCA9F1;

  /* buttons, as the docs draw them: sun-yellow primary, oxblood secondary, both 85% on hover;
     disabled is the border colour with muted text */
  --cta: var(--sun);
  --on-cta: var(--oxblood);
  --btn-secondary: var(--oxblood);
  --on-btn-secondary: var(--white);
  --btn-disabled: var(--stone-400);
  --on-btn-disabled: var(--stone-700);
  --chart-highlight: var(--lilac);

  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);

  --font-display: "GD Bauer Display", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", Monaco, Menlo, "Ubuntu Mono", Consolas, monospace;
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 100px;

  /* the Brand 2026 names that components.css and legal.css use */
  --surface-muted: var(--surface-alt);
  --surface-pill: var(--surface-alt);
  --surface-hover: var(--tint);
  --border-control: var(--control);
  --hero-eyebrow: var(--hero-accent);
  --hero-deep: var(--closing);
  --footer: var(--site-foot);
  --on-footer: var(--ink);
  --on-footer-muted: var(--ink-muted);
  --nav-pill: var(--tint);
  --nav-pill-active: var(--surface-raised);
}

/* roles */
:root {
  --surface: var(--white);
  --surface-alt: var(--stone-100);
  --surface-raised: var(--white);
  --surface-inset: var(--stone-50);
  --surface-active: var(--white);
  --tint: var(--stone-100);
  --fill: var(--stone-200);
  --edge: transparent;
  --ink: var(--oxblood);
  --ink-muted: var(--stone-700);
  --line: var(--stone-400);
  --line-soft: var(--stone-300);
  --control: var(--stone-600);
  --input: var(--white);
  --field: var(--stone-100);
  --field-edge: var(--stone-100);
  --well: var(--stone-50);
  --accent: var(--moss);
  --on-accent: var(--white);
  --accent-ring: rgba(20, 67, 31, 0.14);
  --primary: var(--oxblood);
  --on-primary: var(--white);
  --chip: var(--stone-200);
  --on-chip: var(--oxblood);

  /* the stone band under the bar: hero and the demo intro */
  --hero: var(--stone-100);
  --on-hero: var(--oxblood);
  --on-hero-muted: var(--stone-700);
  --hero-accent: var(--moss);
  --hero-line: var(--stone-300);

  /* the closing block: stone, like the hero */
  --closing: var(--stone-100);
  --on-closing: var(--oxblood);
  --on-closing-muted: var(--stone-700);
  --closing-accent: var(--moss);

  --bar: rgba(255, 255, 255, 0.8);
  --site-foot: var(--white);
  --site-foot-edge: var(--line-soft);
  --warning: #7A5B05;
  --warning-surface: #FAF3E0;
  --warning-line: #EADBB3;
  --danger: #A21D16;
  --shadow-float: 0 1px 2px rgba(39, 0, 0, 0.04), 0 10px 30px -10px rgba(39, 0, 0, 0.1);
  --shadow-lifted: 0 1px 2px rgba(39, 0, 0, 0.04), 0 28px 72px -16px rgba(39, 0, 0, 0.16);
  --shadow-panel: 0 1px 2px rgba(39, 0, 0, 0.04), 0 10px 30px -10px rgba(39, 0, 0, 0.1);
  --shadow-window: 0 1px 2px rgba(39, 0, 0, 0.04), 0 10px 30px -10px rgba(39, 0, 0, 0.1);
  --scrim: rgba(41, 0, 0, 0.08);
}