/* ============================================================
   404CTF writeups - Design tokens
   Light mode by default · dark via [data-theme="dark"]
   Accent via [data-accent] · ambiance via [data-ambiance]
   ============================================================ */

/* ---- Fonts ---- */
/* Serif body/headings: Source Serif 4 · Mono: JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* type families */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: var(--font-serif);

  /* scale */
  --fs-base: 17px;
  --lh-base: 1.7;
  --measure: 70ch;

  /* radius / spacing rhythm */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --sidebar-w: 264px;
  --toc-w: 224px;
  --content-max: 1480px;

  /* shadows (light) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 32, .06), 0 1px 3px rgba(15, 23, 32, .05);
  --shadow-md: 0 4px 16px rgba(15, 23, 32, .08), 0 1px 4px rgba(15, 23, 32, .05);
  --shadow-lg: 0 18px 48px rgba(15, 23, 32, .14), 0 4px 12px rgba(15, 23, 32, .08);

  /* ---- LIGHT palette ---- */
  --bg: #fbfbf9;
  --bg-2: #f4f4f0;
  --surface: #ffffff;
  --surface-2: #f7f7f3;
  --ink: #16181d;
  --ink-2: #3a3f47;
  --muted: #6b7280;
  --faint: #9aa0a8;
  --border: #e7e7e0;
  --border-strong: #d6d6cd;
  --hairline: rgba(22, 24, 29, .08);
  --selection: color-mix(in srgb, var(--accent) 24%, transparent);

  /* code surface (light) */
  --code-bg: #f6f8f7;
  --code-border: #e3e7e4;
  --code-ink: #2b2f36;
  --code-gutter: #aab2ac;
  --term-bg: #11161c;
  --term-ink: #d8e0d8;
  --term-border: #11161c;

  /* syntax (light - github-ish, green-tuned) */
  --hl-comment: #8a9098;
  --hl-keyword: #b3258a;
  --hl-string: #0a7d54;
  --hl-number: #b3530a;
  --hl-func: #4b3bd6;
  --hl-builtin: #08736b;
  --hl-attr: #2f6f9f;
  --hl-punct: #5a6068;
  --hl-meta: #8a9098;
}

/* ---- DARK palette ---- */
[data-theme="dark"] {
  --bg: #0d1117;
  --bg-2: #0a0e13;
  --surface: #141a21;
  --surface-2: #1b222b;
  --ink: #e8eef3;
  --ink-2: #c4ccd4;
  --muted: #8b949e;
  --faint: #5c6570;
  --border: #232b35;
  --border-strong: #303a46;
  --hairline: rgba(255, 255, 255, .07);

  --code-bg: #0b1014;
  --code-border: #20272f;
  --code-ink: #c9d4cc;
  --code-gutter: #4a545c;
  --term-bg: #060a0d;
  --term-ink: #d8e0d8;
  --term-border: #1c242c;

  --hl-comment: #6b7681;
  --hl-keyword: #ff7bd4;
  --hl-string: #4ee59a;
  --hl-number: #ffb066;
  --hl-func: #9b8cff;
  --hl-builtin: #4fd6c8;
  --hl-attr: #7cc6ff;
  --hl-punct: #8b949e;
  --hl-meta: #6b7681;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, .45);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .6);
}

/* ============================================================
   Accent ramps - base color per accent x theme.
   Tints derived with color-mix at point of use.
   ============================================================ */
:root, [data-accent="green"]  { --accent: #00a35c; --accent-ink: #006b3c; }
[data-accent="blue"]   { --accent: #2563eb; --accent-ink: #1d4ed8; }
[data-accent="purple"] { --accent: #7c3aed; --accent-ink: #6d28d9; }
[data-accent="amber"]  { --accent: #c2700a; --accent-ink: #9a5808; }
[data-accent="pink"]   { --accent: #db2777; --accent-ink: #be185d; }

[data-theme="dark"],
[data-theme="dark"][data-accent="green"]  { --accent: #00e676; --accent-ink: #4ef59a; }
[data-theme="dark"][data-accent="blue"]   { --accent: #4d94ff; --accent-ink: #7cb3ff; }
[data-theme="dark"][data-accent="purple"] { --accent: #a78bfa; --accent-ink: #c4b5fd; }
[data-theme="dark"][data-accent="amber"]  { --accent: #f5b042; --accent-ink: #ffce80; }
[data-theme="dark"][data-accent="pink"]   { --accent: #f472b6; --accent-ink: #f9a8d4; }

/* convenience tints used across components */
:root {
  --accent-12: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-18: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-28: color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --on-accent: #ffffff;
}
[data-theme="dark"] { --on-accent: #06140d; }
[data-theme="dark"][data-accent="amber"] { --on-accent: #1a1304; }

/* ============================================================
   Ambiances (re-skins) - set via [data-ambiance]
   epure (default) · terminal · editorial
   ============================================================ */

/* TERMINAL - sharp corners, mono headings, neon accent, grid texture */
[data-ambiance="terminal"] {
  --font-display: var(--font-mono);
  --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 6px;
  --lh-base: 1.66;
}
[data-ambiance="terminal"] .brand-name,
[data-ambiance="terminal"] .card-title,
[data-ambiance="terminal"] .article-title,
[data-ambiance="terminal"] .hero-title,
[data-ambiance="terminal"] .prose h2,
[data-ambiance="terminal"] .prose h3 {
  letter-spacing: -.01em;
}

/* EDITORIAL - warm paper, larger serif, airier */
[data-ambiance="editorial"] {
  --fs-base: 18px;
  --lh-base: 1.78;
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px;
}
[data-ambiance="editorial"]:not([data-theme="dark"]) {
  --bg: #f7f3ea;
  --bg-2: #efe9db;
  --surface: #fffdf8;
  --surface-2: #f6f1e6;
  --border: #e6decb;
  --border-strong: #d8cdb4;
  --code-bg: #f4efe3;
  --code-border: #e3dac7;
}