/* Match the norsk-ctl frontend's Tailwind zinc palette. */

/*
 * Self-hosted Geist Sans + Mono, byte-identical to @norskvideo/ctl-sdk/base.css so the
 * docs chrome renders in the same face as the app and the guide screenshots.
 * Standalone package — it can't @import the SDK's base.css, so it vendors the
 * woff2 (see src/fonts/README obligations). Relative url() → Vite fingerprints
 * them into the build; never a CDN.
 */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900; /* variable range → no faux bold */
  font-display: swap;
  src: url("./fonts/Geist.woff2") format("woff2-variations"),
       url("./fonts/Geist.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/GeistMono.woff2") format("woff2-variations"),
       url("./fonts/GeistMono.woff2") format("woff2");
}

:root {
  --sl-font: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sl-font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Menlo, Consolas, monospace;
}

/* Dark theme — primary. Tailwind zinc + indigo accent matching the React app. */
:root[data-theme="dark"] {
  /* Backgrounds */
  --sl-color-bg: #18181b;               /* zinc-900 */
  --sl-color-bg-nav: #1f1f23;           /* zinc-850 */
  --sl-color-bg-sidebar: #1f1f23;       /* zinc-850 */
  --sl-color-bg-inline-code: #27272a;   /* zinc-800 */
  --sl-color-bg-accent: #818cf8;        /* indigo-400 */

  /* Text */
  --sl-color-text: #e4e4e7;             /* zinc-200 */
  --sl-color-text-accent: #a5b4fc;      /* indigo-300 */
  --sl-color-text-invert: #18181b;      /* zinc-900 */

  /* Gray ramp */
  --sl-color-white: #fafafa;            /* zinc-50 */
  --sl-color-gray-1: #e4e4e7;           /* zinc-200 */
  --sl-color-gray-2: #a1a1aa;           /* zinc-400 */
  --sl-color-gray-3: #71717a;           /* zinc-500 */
  --sl-color-gray-4: #52525b;           /* zinc-600 */
  --sl-color-gray-5: #3f3f46;           /* zinc-700 */
  --sl-color-gray-6: #27272a;           /* zinc-800 */
  --sl-color-black: #18181b;            /* zinc-900 */

  /* Accent */
  --sl-color-accent-low: #1e1b4b;       /* indigo-950 */
  --sl-color-accent: #6366f1;           /* indigo-500 */
  --sl-color-accent-high: #c7d2fe;      /* indigo-200 */

  /* Hairlines */
  --sl-color-hairline-light: #27272a;   /* zinc-800 */
  --sl-color-hairline: #3f3f46;         /* zinc-700 */
  --sl-color-hairline-shade: #52525b;   /* zinc-600 */
}

/* Light theme — reasonable defaults, zinc-tinted. */
:root {
  --sl-color-accent-low: #eef2ff;       /* indigo-50 */
  --sl-color-accent: #4f46e5;           /* indigo-600 */
  --sl-color-accent-high: #312e81;      /* indigo-900 */
  --sl-color-hairline-light: #e4e4e7;   /* zinc-200 */
  --sl-color-hairline: #d4d4d8;         /* zinc-300 */
}

/* Scrollbars — mirror frontend. */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #18181b;
}
::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 3px;
}

/* Nav title weight + tracking to match the app brand. */
.site-title {
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* Tighter heading tracking. */
h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.025em; }
h3 { letter-spacing: -0.015em; }

/* Cards — rounded, accent on hover. */
.sl-link-card,
.card {
  border-radius: 12px;
}
.sl-link-card:hover {
  border-color: var(--sl-color-accent);
}