/* ==========================================================
   tokens.css — Design tokens
   The ONLY place where colors, fonts, sizes, spacing and
   radii are defined. Every other stylesheet uses these
   custom properties, so changing a value here changes it
   everywhere.

   CUSTOMIZE HERE:
   - --font-heading / --font-body / --font-mono : typefaces
   - --heading-soft / --heading-wonk            : Fraunces character axes
   - --text-base, --text-*                      : type scale
   - --color-bg / --color-ink / --color-muted   : main colors
   - --accent-python, --accent-networking, …    : per-topic accent colors
   - --space-*                                  : spacing scale
   - --measure                                  : max line length of body text
   - --radius                                   : corner radius (0 = square)
   - --line                                     : hairline width

   Light and dark values sit side by side: light in :root,
   dark in the two blocks at the bottom (one for the
   system preference, one for the manual toggle).
   ========================================================== */

/* ---------- Self-hosted fonts (SIL Open Font License, see assets/fonts/) ---------- */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-var-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---------- Typefaces ---------- */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:
    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fraunces axes: SOFT 0–100 (rounder), WONK 0/1 (quirky letterforms) */
  --heading-soft: 40;
  --heading-wonk: 1;
  --heading-weight: 400;

  /* ---------- Type scale ---------- */
  --text-base: 1.0625rem; /* 17px body text */
  --text-sm: 0.9375rem; /* 15px */
  --text-xs: 0.8125rem; /* 13px labels, badges */
  --text-code: 0.875rem; /* 14px code blocks */
  --text-lead: 1.25rem; /* page summary */
  --text-h3: 1.25rem;
  --text-h2: 1.75rem;
  --text-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  --text-hero: clamp(2.75rem, 1.8rem + 4vw, 4.5rem);

  --leading-body: 1.7;
  --leading-tight: 1.15;
  --measure: 70ch;

  /* ---------- Colors: light ---------- */
  --color-bg: #fff; /* page background */
  --color-ink: #000; /* main text */
  --color-muted: #666; /* secondary text (5.7:1 on white) */
  --color-faint: #767676; /* placeholder text (4.5:1 on white) */
  --color-line: #000; /* strong hairlines */
  --color-line-soft: #ddd; /* quiet dividers */
  --color-surface: #f5f5f5; /* hover, code background */
  --color-mark: #ececec; /* search highlight background */
  --color-focus: #000; /* focus ring */
  --color-overlay: rgba(0, 0, 0, 0.35); /* behind drawer and search palette */

  /* Base accent: used where no topic accent applies */
  --color-accent: #000;

  /* ---------- Per-topic accents ----------
     Used sparingly: icons, the thin rule on top of topic pages,
     active-state markers, exam tags. Every value has at least
     3:1 contrast against the background (WCAG non-text contrast). */
  --accent-math: #23395d;
  --accent-python: #2f6690;
  --accent-markdown: #3b5f6b;
  --accent-javascript: #8a7300;
  --accent-typescript: #1f4f80;
  --accent-php: #62668f;
  --accent-csharp: #5b4a8a;
  --accent-java: #6b4a2e;
  --accent-c: #2a5530;
  --accent-rust: #a84b00;
  --accent-regex: #4f5b66;
  --accent-html-css: #b0452a;
  --accent-programming: #6a4c93;
  --accent-architecture: #80553a;
  --accent-testing: #7a3f5f;
  --accent-networking: #1f7a68;
  --accent-hardware: #8c5a2b;
  --accent-iot: #7a6a2a;
  --accent-robotics: #677449;
  --accent-os: #50627a;
  --accent-linux: #3f7a34;
  --accent-scripting: #6b3f3f;
  --accent-cloud: #2b7a9c;
  --accent-containers: #2d5f73;
  --accent-iac: #3f6b5a;
  --accent-observability: #a05a5a;
  --accent-security: #a33b36;
  --accent-databases: #7d6a1f;
  --accent-analytics: #3d6b8a;
  --accent-scraping: #846678;
  --accent-field-notes: #6b6257;
  --accent-itsm: #8a3f78;
  --accent-git: #3d4f9f;
  --accent-datacenter: #5d6a1c;
  --accent-identity: #7c3f8a;
  --accent-ot: #8f5a12;
  --accent-web: #2f7a4f;
  --accent-skills: #1d6b74;
  --accent-agile: #9a4a1f;
  --accent-ai: #9b3d63;
  --accent-prompting: #7a5548;
  --accent-vibe-coding: #6b3aa8;

  /* ---------- Syntax highlighting ---------- */
  --code-bg: var(--color-surface);
  --code-ink: #111;
  --code-comment: #6b6b6b;
  --code-keyword: #000;
  --code-string: #2f5f3a;
  --code-number: #7a3e00;
  --code-function: #000;
  --code-builtin: #2f4f7f;
  --code-punctuation: #555;

  /* ---------- Spacing ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* ---------- Shape ---------- */
  --radius: 0;
  --line: 1px;
  --rule-accent: 3px; /* thin colored rule on top of topic pages */
  --focus-width: 2px;

  /* ---------- Layout ---------- */
  --header-height: 3.75rem;
  --sidebar-width: 16rem;
  --toc-width: 14rem;
  --path-meta-width: 12rem; /* tag column in learning paths (fits "AWS Cloud Practitioner") */
  --page-max: 84rem;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 160ms;
}

/* ---------- Colors: dark (system preference, unless light was chosen) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #161616;
    --color-ink: #ededed;
    --color-muted: #a3a3a3;
    --color-faint: #8f8f8f;
    --color-line: #ededed;
    --color-line-soft: #333;
    --color-surface: #202020;
    --color-mark: #3a3a3a;
    --color-focus: #ededed;
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-accent: #ededed;

    --accent-math: #a9bde0;
    --accent-python: #7fb0d6;

    --accent-markdown: #9cc3cf;
    --accent-javascript: #e0c95a;
    --accent-typescript: #8db4e2;
    --accent-php: #b8bbe0;
    --accent-csharp: #b9a8e6;
    --accent-java: #d6b38f;
    --accent-c: #b5e0b0;
    --accent-rust: #fca65a;
    --accent-regex: #c3ccd5;
    --accent-html-css: #f0a184;
    --accent-programming: #b39ddb;
    --accent-architecture: #e0b08f;
    --accent-testing: #e0a3c3;
    --accent-networking: #6cc2ae;
    --accent-hardware: #d4a373;
    --accent-iot: #d6c47e;
    --accent-robotics: #a6b082;
    --accent-os: #9fb0c8;
    --accent-linux: #8fc47f;
    --accent-scripting: #e0a3a3;
    --accent-cloud: #7cc3e0;
    --accent-containers: #93c4d6;
    --accent-iac: #92c9b2;
    --accent-observability: #e8a8a8;
    --accent-security: #e58f89;
    --accent-databases: #d1bd6a;
    --accent-analytics: #9cc4e0;
    --accent-scraping: #bfa3b8;
    --accent-field-notes: #c7bdb0;
    --accent-itsm: #d99ac9;
    --accent-git: #9ba8e6;
    --accent-datacenter: #c2cf7a;
    --accent-identity: #c9a0d6;
    --accent-ot: #e2b373;
    --accent-web: #8fcca7;
    --accent-skills: #82c6cc;
    --accent-agile: #e8a077;
    --accent-ai: #e58fb0;
    --accent-prompting: #d9a898;
    --accent-vibe-coding: #c79cf7;

    --code-ink: #e6e6e6;
    --code-comment: #8c8c8c;
    --code-keyword: #fff;
    --code-string: #a8d5a2;
    --code-number: #e8b57a;
    --code-function: #fff;
    --code-builtin: #a9c4ec;
    --code-punctuation: #aaa;
  }
}

/* ---------- Colors: dark (manual toggle) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #161616;
  --color-ink: #ededed;
  --color-muted: #a3a3a3;
  --color-faint: #8f8f8f;
  --color-line: #ededed;
  --color-line-soft: #333;
  --color-surface: #202020;
  --color-mark: #3a3a3a;
  --color-focus: #ededed;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-accent: #ededed;

  --accent-math: #a9bde0;
  --accent-python: #7fb0d6;

  --accent-markdown: #9cc3cf;
  --accent-javascript: #e0c95a;
  --accent-typescript: #8db4e2;
  --accent-php: #b8bbe0;
  --accent-csharp: #b9a8e6;
  --accent-java: #d6b38f;
  --accent-c: #b5e0b0;
  --accent-rust: #fca65a;
  --accent-regex: #c3ccd5;
  --accent-html-css: #f0a184;
  --accent-programming: #b39ddb;
  --accent-architecture: #e0b08f;
  --accent-testing: #e0a3c3;
  --accent-networking: #6cc2ae;
  --accent-hardware: #d4a373;
  --accent-iot: #d6c47e;
  --accent-robotics: #a6b082;
  --accent-os: #9fb0c8;
  --accent-linux: #8fc47f;
  --accent-scripting: #e0a3a3;
  --accent-cloud: #7cc3e0;
  --accent-containers: #93c4d6;
  --accent-iac: #92c9b2;
  --accent-observability: #e8a8a8;
  --accent-security: #e58f89;
  --accent-databases: #d1bd6a;
  --accent-analytics: #9cc4e0;
  --accent-scraping: #bfa3b8;
  --accent-field-notes: #c7bdb0;
  --accent-itsm: #d99ac9;
  --accent-git: #9ba8e6;
  --accent-datacenter: #c2cf7a;
  --accent-identity: #c9a0d6;
  --accent-ot: #e2b373;
  --accent-web: #8fcca7;
  --accent-skills: #82c6cc;
  --accent-agile: #e8a077;
  --accent-ai: #e58fb0;
  --accent-prompting: #d9a898;
  --accent-vibe-coding: #c79cf7;

  --code-ink: #e6e6e6;
  --code-comment: #8c8c8c;
  --code-keyword: #fff;
  --code-string: #a8d5a2;
  --code-number: #e8b57a;
  --code-function: #fff;
  --code-builtin: #a9c4ec;
  --code-punctuation: #aaa;
}

/* ---------- Colors: print (always black on white, also in dark mode) ---------- */
@media print {
  :root,
  :root[data-theme],
  :root:not([data-theme="light"]) {
    color-scheme: light;
    --color-bg: #fff;
    --color-ink: #000;
    --color-muted: #444;
    --color-line: #000;
    --color-line-soft: #999;
    --color-surface: #fff;
    --code-bg: #fff;
    --code-ink: #000;
    --code-comment: #444;
    --code-keyword: #000;
    --code-string: #000;
    --code-number: #000;
    --code-function: #000;
    --code-builtin: #000;
    --code-punctuation: #000;
  }
}