/* ============================================================
   Aurorix Quote Portal — Design tokens
   Derived from the claude.ai/code capture (design/bestexample).
   Colors are HSL triples consumed as hsl(var(--x) / alpha).
   Theme is selected by html[data-mode="light|dark"], set pre-paint
   from localStorage.userThemeMode (system|light|dark).
   ============================================================ */

/* ---------- Fonts (weight ranges per design/bestexample/fonts/_font-faces.json) ---------- */
@font-face {
  font-family: "Anthropic Sans";
  src: url("/static/fonts/anthropic-sans.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Sans";
  src: url("/static/fonts/anthropic-sans-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Serif";
  src: url("/static/fonts/anthropic-serif.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Serif";
  src: url("/static/fonts/anthropic-serif-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Mono";
  src: url("/static/fonts/anthropic-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Mono";
  src: url("/static/fonts/anthropic-mono-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/static/fonts/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anthropicons";
  src: url("/static/fonts/anthropicons.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: block; /* icons: avoid FOUT letters */
}

:root {
  /* Typography (stacks per captured --font-anthropic-*) */
  --font-sans: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
  --font-mono: "Anthropic Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Shape */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-full: 999px;
}

/* ---------- Light theme (values: design/bestexample/css/variables-light.css) ---------- */
html[data-mode="light"] {
  color-scheme: light;

  --bg-000: 0 0% 100%;
  --bg-100: 60 14% 97%;
  --bg-200: 60 11% 95%;
  --bg-300: 45 12% 93%;
  --bg-400: 50 11% 89%;
  --bg-500: 50 11% 89%;

  --text-000: 0 0% 7%;
  --text-100: 0 0% 7%;
  --text-200: 60 3% 21%;
  --text-300: 60 3% 21%;
  --text-400: 43 3% 47%;
  --text-500: 43 3% 47%;

  --border: 60 2% 12%;

  /* Accent = Aurorix blue (brand decision; slots mirror captured accent tiers) */
  --accent-000: 226 71% 40%;
  --accent-100: 221 83% 53%;
  --accent-200: 221 83% 53%;
  --accent-900: 214 95% 93%;

  --danger-000: 0 58% 35%;
  --danger-100: 0 61% 52%;
  --danger-200: 0 61% 52%;
  --danger-900: 0 78% 91%;

  --success-100: 142 72% 29%;
  --success-900: 141 84% 93%;
  --warning-100: 26 90% 37%;
  --warning-900: 48 96% 89%;
  --info-100: 221 83% 45%;
  --info-900: 214 95% 93%;
  --purple-100: 263 70% 50%;
  --purple-900: 251 91% 95%;

  --shadow-card: 0 1px 2px hsl(0 0% 0% / 0.04), 0 4px 16px hsl(0 0% 0% / 0.04);
  --shadow-menu: 0 8px 24px hsl(0 0% 0% / 0.16);
  --shadow-flyout: 0 12px 32px hsl(0 0% 0% / 0.22);
}

/* ---------- Dark theme (values: design/bestexample/css/variables-dark.css) ---------- */
html[data-mode="dark"] {
  color-scheme: dark;

  --bg-000: 60 2% 17%;
  --bg-100: 60 2% 12%;
  --bg-200: 60 2% 9%;
  --bg-300: 0 0% 7%;
  --bg-400: 0 0% 4%;
  --bg-500: 0 0% 4%;

  --text-000: 60 14% 97%;
  --text-100: 60 14% 97%;
  --text-200: 55 9% 74%;
  --text-300: 55 9% 74%;
  --text-400: 48 5% 57%;
  --text-500: 48 5% 57%;

  --border: 53 12% 87%;

  --accent-000: 212 96% 78%;
  --accent-100: 213 94% 68%;
  --accent-200: 213 94% 68%;
  --accent-900: 226 50% 21%;

  --danger-000: 0 77% 81%;
  --danger-100: 0 73% 59%;
  --danger-200: 0 73% 59%;
  --danger-900: 0 64% 19%;

  --success-100: 97 59% 46%;
  --success-900: 127 100% 14%;
  --warning-100: 40 71% 50%;
  --warning-900: 45 95% 15%;
  --info-100: 210 66% 67%;
  --info-900: 210 56% 25%;
  --purple-100: 251 85% 75%;
  --purple-900: 250 25% 19%;

  --shadow-card: 0 1px 2px hsl(0 0% 0% / 0.15), 0 4px 16px hsl(0 0% 0% / 0.1);
  --shadow-menu: 0 8px 24px hsl(0 0% 0% / 0.35);
  --shadow-flyout: 0 12px 32px hsl(0 0% 0% / 0.5);
}

/* ============================================================
   Icons — Anthropicons glyphs (rendered like the captured
   <span data-cds="Icon">: single PUA codepoint, ligatures off,
   variable weight ~433). Codepoints verified against
   design/bestexample/icons/glyph-specimen.html.
   ============================================================ */
.ic {
  font-family: "Anthropicons";
  font-weight: 433;
  font-style: normal;
  font-feature-settings: "liga" 0;
  font-size: 18px;
  line-height: 1;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

.ic-panel::before      { content: "\e0dd"; } /* collapse/expand sidebar */
.ic-search::before     { content: "\e0d3"; }
.ic-gear::before       { content: "\e0d6"; } /* Settings */
.ic-globe::before      { content: "\e082"; } /* Language */
.ic-help::before       { content: "\e088"; } /* Get help */
.ic-info::before       { content: "\e08f"; } /* Learn more */
.ic-logout::before     { content: "\e0a4"; }
.ic-monitor::before    { content: "\e053"; } /* Appearance: system */
.ic-sun::before        { content: "\e0ee"; } /* Appearance: light */
.ic-moon::before       { content: "\e0b0"; } /* Appearance: dark */
.ic-chev-down::before  { content: "\e027"; }
.ic-chev-right::before { content: "\e02a"; }
.ic-chev-up::before    { content: "\e02b"; }
.ic-check::before      { content: "\e03b"; }
.ic-close::before      { content: "\e10f"; }
.ic-plus::before       { content: "\e001"; }
.ic-kebab::before      { content: "\e062"; }
.ic-download::before   { content: "\e063"; }
.ic-home::before       { content: "\e08a"; }
.ic-clipboard::before  { content: "\e041"; } /* Standards nav */
.ic-users::before      { content: "\e106"; } /* Users nav */
.ic-user::before       { content: "\e104"; } /* End users nav */
.ic-grid::before       { content: "\e084"; } /* Dashboard nav */