/* ============================================================
   Design tokens

   Values copied from the x.ai/bot stylesheets supplied by the
   operator. Nothing here is invented:

   - base palette + semantic layer  -> 3zc5-0t9ved7_.css
   - theme aliases, radii, frame    -> 1qrbg1okn-tds.css
   - font fallback metrics          -> 1vw2mgsbzb55d.css

   Colours are held as bare HSL triples so they can be used with
   an alpha channel: hsl(var(--background) / .85)
   ============================================================ */

/* ---- Typefaces ---------------------------------------------
   Universal Sans is a commercial licence and the font files were
   not supplied, so it is not shipped. These are x.ai's own
   metric-matched fallback faces: Arial, re-proportioned to sit
   where Universal Sans would have sat.
   ------------------------------------------------------------ */

@font-face {
  font-family: "UniversalSans Fallback";
  src: local("Arial");
  ascent-override: 89.92%;
  descent-override: 22.73%;
  line-gap-override: 0%;
  size-adjust: 105.67%;
}

@font-face {
  font-family: "UniversalSansDisplay Fallback";
  src: local("Arial");
  ascent-override: 97.16%;
  descent-override: 24.57%;
  line-gap-override: 0%;
  size-adjust: 97.8%;
}

:root {
  /* ---- Base palette ---------------------------------------- */
  --color-jet: 0 0% 4%;
  --color-charcoal: 0 0% 10%;
  --color-umbra: 221 12% 14%;
  --color-ink: 213 11% 16%;
  --color-steel: 216 4% 22%;
  --color-fog: 216 4% 51%;
  --color-pewter: 213 12% 70%;
  --color-dove: 222 19% 86%;
  --color-nimbus: 228 21.74% 95.49%;
  --color-ivory: 40 18% 97%;
  --color-white: 0 0% 100%;

  --color-dawn: 37 100% 76%;
  --color-sunset: 22 100% 51.6%;
  --color-breeze: 214 48.9% 73.9%;

  /* Traffic lights, from the source */
  --terminal-traffic-red: #ff5f57;
  --terminal-traffic-yellow: #ffbd2e;
  --terminal-traffic-green: #28c840;

  /* Agent avatars. Not a new palette — six colours already above,
     ordered so the accent leads and the rest recede. */
  --agent-1: hsl(var(--color-sunset));
  --agent-2: hsl(var(--color-dawn));
  --agent-3: hsl(var(--color-breeze));
  --agent-4: hsl(var(--color-pewter));
  --agent-5: hsl(var(--color-fog));
  --agent-6: hsl(var(--color-steel));

  /* ---- Semantic layer, light ------------------------------- */
  --primary: var(--color-jet);
  --primary-hover: var(--color-umbra);
  --secondary: var(--color-fog);
  --secondary-hover: var(--color-pewter);
  --accent: var(--color-sunset);
  --accent-hover: var(--color-dawn);
  --background: var(--color-white);
  --background-hover: var(--color-dove);
  --foreground: var(--color-jet);
  --card: var(--color-ivory);
  --border: var(--color-dove);

  /* ---- Theme aliases --------------------------------------- */
  --color-theme-bg: hsl(var(--background));
  --color-theme-bg-subtle: hsl(var(--card));
  --color-theme-text: hsl(var(--foreground));
  --color-theme-heading: hsl(var(--primary));
  --color-theme-text-muted: hsl(var(--secondary));
  --color-theme-border: hsl(var(--border));
  --color-theme-accent: hsl(var(--accent));
  --color-theme-accent-hover: hsl(var(--accent-hover));

  --color-theme-fg: #252525;
  --color-theme-border-01: color-mix(in srgb, var(--color-theme-fg) 2.5%, transparent);
  --color-theme-border-02: color-mix(in srgb, var(--color-theme-fg) 10%, transparent);
  --color-theme-card-hex: #f2f2f2;
  --color-theme-card-02-hex: #ebebeb;
  --color-theme-card-hover-hex: #ebebeb;

  --color-theme-button-bg: var(--color-theme-fg);
  --color-theme-button-text: var(--color-theme-bg);

  --shadow-outline-theme: 0 0 0 1px var(--color-theme-border-02);

  /* ---- Type ------------------------------------------------ */
  --font-text: "UniversalSans Fallback", Arial, Helvetica, sans-serif;
  --font-display: "UniversalSansDisplay Fallback", Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco,
    "Liberation Mono", "Courier New", monospace;

  --tracking-sm: 0.01em;
  --tracking-display: -0.02em;
  --tracking-headline: -0.04em;
  --tracking-mono-tag: 0.1em;

  /* ---- Shape and motion ------------------------------------ */
  --radius: 0.5rem;
  --radius-xs: 4px;
  --radius-2xs: 2px;
  --radius-media: 1.5rem;
  --radius-pill: 9999px;

  --duration: 0.14s;
  --ease-out-spring: cubic-bezier(0.25, 1, 0.5, 1);

  /* ---- Frame ----------------------------------------------- */
  --site-frame-inset: 20px;
  --site-content-width: 64rem;
  --site-header-h: 4rem;
  --site-header-bg: hsl(var(--background) / 0.85);
  --site-header-blur: 12px;

  --button-padding-sm: 0.45em 0.8em 0.46em;
}

@media (max-width: 640px) {
  :root {
    --site-frame-inset: 8px;
  }
}

/* ---- Semantic layer, dark ---------------------------------- */
html.dark {
  --primary: var(--color-white);
  --primary-hover: var(--color-ivory);
  --secondary: var(--color-fog);
  --secondary-hover: var(--color-pewter);
  --accent: var(--color-sunset);
  --accent-hover: var(--color-dawn);
  --background: var(--color-jet);
  --background-hover: var(--color-umbra);
  --foreground: var(--color-dove);
  --card: var(--color-charcoal);
  --border: var(--color-umbra);

  --color-theme-fg: #edecec;
  --color-theme-card-hex: #1b1b1b;
  --color-theme-card-02-hex: #202020;
  --color-theme-card-hover-hex: #202020;
}