/* ---------------------------------------------------------------------------
   Conduit website — design tokens
   Values copied verbatim from pixel/packages/ui/src/tokens.css so the site and
   the app read as one product. Keep them in sync; don't invent new colors here.
   --------------------------------------------------------------------------- */

/* --- Fonts, self-hosted (matches the app's font-src 'self' posture) -------- */

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Light theme is the base definition ----------------------------------- */

:root {
  --bg: #faf9f5;
  --bg-side: #f0eee6;
  --card: #ffffff;
  --card-hi: #f5f4ee;
  --line: #e4e1d7;
  --line-soft: #ece9e0;
  --line-hi: #cfcbbf;
  --ink: #29271f;
  --ink-2: #59564c;
  --ink-3: #706c61;
  --ok: #147c3b;
  --warn: #af5109;
  --err: #b91c1c;
  --code: #a2532b;
  --link: #1f5fa8;

  /* Provider identity — the only hue in the chrome. Defaults to Anthropic
     terracotta; js/site.js rotates these in the hero. */
  --hue: #b04f2b;
  --hue-text: #b04f2b;
  --hue-solid: #c5522d;
  --hue-wash: rgba(176, 79, 43, 0.09);

  --shadow-sm: 0 1px 2px rgba(41, 39, 31, 0.06);
  --shadow: 0 2px 8px rgba(41, 39, 31, 0.07), 0 1px 2px rgba(41, 39, 31, 0.05);
  --shadow-lg: 0 18px 48px rgba(41, 39, 31, 0.13), 0 2px 8px rgba(41, 39, 31, 0.06);

  --font-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --r-xs: 5px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --maxw: 1120px;
  --gutter: 24px;
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Dark theme: system preference, unless explicitly overridden to light -- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #262624;
    --bg-side: #1f1e1d;
    --card: #30302e;
    --card-hi: #3a3a37;
    --line: #3d3d3a;
    --line-soft: #343431;
    --line-hi: #4d4d49;
    --ink: #eceae2;
    --ink-2: #c4c2ba;
    --ink-3: #a6a39d;
    --ok: #4ade80;
    --warn: #fbbf24;
    --err: #f97e7e;
    --code: #e0a080;
    --link: #9db8e8;

    --hue: #d97757;
    --hue-text: #d97757;
    --hue-solid: #c5522d;
    --hue-wash: rgba(217, 119, 87, 0.12);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

/* --- Dark theme: explicit toggle wins in both directions ------------------- */

:root[data-theme="dark"] {
  --bg: #262624;
  --bg-side: #1f1e1d;
  --card: #30302e;
  --card-hi: #3a3a37;
  --line: #3d3d3a;
  --line-soft: #343431;
  --line-hi: #4d4d49;
  --ink: #eceae2;
  --ink-2: #c4c2ba;
  --ink-3: #a6a39d;
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #f97e7e;
  --code: #e0a080;
  --link: #9db8e8;

  --hue: #d97757;
  --hue-text: #d97757;
  --hue-solid: #c5522d;
  --hue-wash: rgba(217, 119, 87, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
}