/* Studio design tokens. Everything visual in shell/components/pages derives
   from these; Material/Zensical variables are mapped here and nowhere else. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-latin-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4-latin-wght.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --nac-font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nac-font-serif: "Source Serif 4", Georgia, serif;
  --nac-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --nac-radius-s: 6px;
  --nac-radius-m: 10px;
  --nac-radius-l: 14px;
  --nac-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --nac-measure: 46rem;

  --md-text-font: "Schibsted Grotesk";
  --md-code-font: "IBM Plex Mono";
}

/* ---------- Dark (default) ---------- */

[data-md-color-scheme="slate"] {
  color-scheme: dark;
  --nac-bg: #0b0a10;
  --nac-surface-1: #110f17;
  --nac-surface-2: #17151f;
  --nac-surface-3: #1f1c29;
  --nac-edge: #25222f;
  --nac-edge-strong: #363244;
  --nac-edge-light: rgb(255 255 255 / 0.045);
  --nac-text: #f2f0f6;
  --nac-text-2: #b9b4c4;
  --nac-text-3: #888395;
  --nac-brand: #a883f5;
  --nac-brand-strong: #8556f0;
  --nac-brand-tint: rgb(168 131 245 / 0.13);
  --nac-amber: #f5b448;
  --nac-amber-tint: rgb(245 180 72 / 0.14);
  --nac-green: #7fd8c9;
  --nac-red: #ff8f8f;
  --nac-link: #c4a9ff;
  --nac-focus: #f5b448;
  --nac-wordmark: linear-gradient(92deg, #c1a3ff 0%, #d9a6d6 45%, #f5b448 100%);
  --nac-shadow-1: 0 1px 2px rgb(0 0 0 / 0.35);
  --nac-shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.65);
  --nac-shadow-3: 0 2px 4px rgb(0 0 0 / 0.4), 0 28px 64px -20px rgb(0 0 0 / 0.8);

  --nac-syn-keyword: #c4a9ff;
  --nac-syn-string: #f3c67f;
  --nac-syn-comment: #827d90;
  --nac-syn-name: #ffffff;
  --nac-syn-function: #e6dcff;
  --nac-syn-number: #7fd8c9;
  --nac-syn-operator: #b9b4c4;

  /* Zensical search overlay (Shadow DOM) reads these RGB triplets. */
  --color-foreground: 242 240 246;
  --color-background: 23 21 31;
  --color-background-subtle: 31 28 41;
  --color-backdrop: 6 5 10;
}

/* ---------- Light ---------- */

[data-md-color-scheme="default"] {
  color-scheme: light;
  --nac-bg: #fbfafc;
  --nac-surface-1: #ffffff;
  --nac-surface-2: #f5f3f8;
  --nac-surface-3: #ece9f2;
  --nac-edge: #e7e4ee;
  --nac-edge-strong: #d3cedd;
  --nac-edge-light: rgb(255 255 255 / 0.7);
  --nac-text: #15131b;
  --nac-text-2: #4e4959;
  --nac-text-3: #6c6777;
  --nac-brand: #6d3fd0;
  --nac-brand-strong: #5a2fb8;
  --nac-brand-tint: rgb(109 63 208 / 0.09);
  --nac-amber: #9a5a00;
  --nac-amber-tint: rgb(242 169 59 / 0.18);
  --nac-green: #0d7466;
  --nac-red: #b3261e;
  --nac-link: #6231c4;
  --nac-focus: #6d3fd0;
  --nac-wordmark: linear-gradient(92deg, #6d3fd0 0%, #a4479c 50%, #d68200 100%);
  --nac-shadow-1: 0 1px 2px rgb(40 24 80 / 0.06);
  --nac-shadow-2: 0 1px 2px rgb(40 24 80 / 0.06), 0 10px 28px -12px rgb(40 24 80 / 0.18);
  --nac-shadow-3: 0 2px 4px rgb(40 24 80 / 0.06), 0 26px 60px -24px rgb(40 24 80 / 0.28);

  --nac-syn-keyword: #6231c4;
  --nac-syn-string: #8c5200;
  --nac-syn-comment: #726d7c;
  --nac-syn-name: #15131b;
  --nac-syn-function: #3f2a80;
  --nac-syn-number: #0d7466;
  --nac-syn-operator: #4e4959;

  --color-foreground: 21 19 27;
  --color-background: 255 255 255;
  --color-background-subtle: 245 243 248;
  --color-backdrop: 21 19 27;
}

/* ---------- Material/Zensical variable mapping ---------- */

[data-md-color-scheme] {
  --font-family: var(--nac-font-sans);
  --md-default-bg-color: var(--nac-bg);
  --md-default-bg-color--light: var(--nac-surface-1);
  --md-default-bg-color--lighter: var(--nac-surface-2);
  --md-default-bg-color--lightest: var(--nac-surface-3);
  --md-default-fg-color: var(--nac-text);
  --md-default-fg-color--light: var(--nac-text-2);
  --md-default-fg-color--lighter: var(--nac-text-3);
  --md-default-fg-color--lightest: var(--nac-edge);

  --md-primary-fg-color: var(--nac-brand-strong);
  --md-primary-fg-color--light: var(--nac-brand);
  --md-primary-fg-color--dark: var(--nac-brand-strong);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgb(255 255 255 / 0.7);
  --md-accent-fg-color: var(--nac-brand);
  --md-accent-fg-color--transparent: var(--nac-brand-tint);
  --md-accent-bg-color: #ffffff;

  --md-typeset-color: var(--nac-text);
  --md-typeset-a-color: var(--nac-link);
  --md-typeset-mark-color: var(--nac-amber-tint);
  --md-typeset-table-color: var(--nac-edge);
  --md-typeset-table-color--light: var(--nac-surface-2);
  --md-typeset-kbd-color: var(--nac-surface-2);
  --md-typeset-kbd-accent-color: var(--nac-edge-strong);
  --md-typeset-kbd-border-color: var(--nac-edge);

  --md-code-bg-color: var(--nac-surface-1);
  --md-code-fg-color: var(--nac-text);
  --md-code-hl-color: var(--nac-brand-tint);
  --md-code-hl-color--light: var(--nac-brand-tint);
  --md-code-hl-keyword-color: var(--nac-syn-keyword);
  --md-code-hl-string-color: var(--nac-syn-string);
  --md-code-hl-comment-color: var(--nac-syn-comment);
  --md-code-hl-name-color: var(--nac-syn-name);
  --md-code-hl-function-color: var(--nac-syn-function);
  --md-code-hl-number-color: var(--nac-syn-number);
  --md-code-hl-constant-color: var(--nac-syn-keyword);
  --md-code-hl-special-color: var(--nac-syn-string);
  --md-code-hl-operator-color: var(--nac-syn-operator);
  --md-code-hl-punctuation-color: var(--nac-syn-operator);
  --md-code-hl-variable-color: var(--nac-syn-name);
  --md-code-hl-generic-color: var(--nac-text-2);

  --md-footer-bg-color: var(--nac-surface-1);
  --md-footer-bg-color--dark: var(--nac-bg);
  --md-footer-fg-color: var(--nac-text);
  --md-footer-fg-color--light: var(--nac-text-2);
  --md-footer-fg-color--lighter: var(--nac-text-3);

  --md-shadow-z1: var(--nac-shadow-1);
  --md-shadow-z2: var(--nac-shadow-2);
  --md-shadow-z3: var(--nac-shadow-3);
  --md-admonition-bg-color: var(--nac-surface-1);
  --md-admonition-fg-color: var(--nac-text);
}