/* Base: reset, fonts, theme variables, scales, typography and links.
 * Loaded first; layout.css, components.css and pages.css build on it.
 *
 * Breakpoints (CSS can't use variables in media queries, so these are
 * the only max-width values used anywhere):
 *   620px - phones
 *   760px - small tablets
 *   980px - tablets; the nav stops being sticky here
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700&display=swap');

/* Minimal reset. box-sizing: border-box is load-bearing for several
 * width+padding combinations. */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

pre {
  max-width: 100%;
  overflow-x: auto;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

:root {
  --radius: 12px;
  --radius-lg: 16px;
  --rule: 1px solid var(--border);
  --rule-strong: 2px solid var(--text);
  /* Keeps anchor targets and sticky items clear of the sticky nav */
  --nav-offset: 6rem;

  --fs-2xs: 0.65rem;
  --fs-xs: 0.72rem;
  --fs-sm: 0.85rem;
  --fs-md: 0.95rem;
  --fs-base: 1rem;
  --fs-lg: 1.2rem;
  --fs-xl: 1.35rem;

  /* Option D (Futurism editorial) palette - red accent on cream */
  --primary: #d00029;
  --primary-hover: #a80021;
  --primary-light: #ffe3e8;
  --accent: #f59e0b;
  /* Text on a solid --accent fill; stays dark in both themes */
  --on-accent: #0a0a0a;
  --success: #10b981;

  /* Neutral Colors */
  --bg: #fffef7;
  --bg-card: #ffffff;
  --calendar-card-bg: #f1eee2;
  --calendar-card-border: #d8d4c4;
  --header-bg: #f8f8f8;
  --border: #e5e2d6;
  --border-hover: #d0cbb8;
  --text: #0a0a0a;
  --text-muted: #4a4a4a;
  /* Italic text color, dark enough to pass text contrast on cream */
  --emphasis: #6d28d9;

  /* Shadows for depth */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* The nav stops being sticky here, so nothing needs to clear it */
@media (max-width: 980px) {
  :root {
    --nav-offset: 1rem;
  }
}

/* Dark mode: neutral scale flip to a warm near-black (not blue-black),
 * consistent with the light mode's warm cream. --accent and
 * --success are unchanged - they're only used on self-contained saturated
 * fills (badges, gradients), not backgrounds/text, so they read fine in
 * both modes (see F01's audit). --primary IS redefined here, unlike F01's
 * precedent: Option D uses red as running link/nav text color (not just
 * isolated fills), and the light-mode red is too dark to pass text
 * contrast against a near-black background, so dark mode gets a lighter
 * tint of the same hue. Keyed off data-theme (set by an inline script
 * in <head>, from either localStorage or prefers-color-scheme) rather than
 * the media query directly, so the manual toggle can override the OS
 * setting. */
:root[data-theme="dark"] {
  --primary: #ff5c78;
  --primary-hover: #ff7d92;
  --primary-light: #3a1420;

  --bg: #121110;
  --bg-card: #1c1a17;
  --calendar-card-bg: #2a2722;
  --calendar-card-border: #45413a;
  --header-bg: #1c1a17;
  --border: #33302a;
  --border-hover: #4a453c;
  --text: #f5f3ea;
  --text-muted: #b8b3a6;
  --emphasis: #a78bfa;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

/* Archivo Narrow throughout (Option D's single condensed-grotesk system),
 * body text included, not just headings. */
body {
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease;
  font-size: var(--fs-base);
  line-height: 1.7;
  font-family: "Archivo Narrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem); }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem); }
h3 { font-size: clamp(1.375rem, 1.5vw + 1rem, 1.75rem); }

h1, h2, h3, h4, h5, h6,
.banner h1,
.banner p {
  font-family: "Archivo Narrow", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}

h1, .banner h1 {
  line-height: 1.1;
  margin-bottom: 1rem;
}

h2 {
  line-height: 1.2;
  margin-bottom: 0.875rem;
}

h3 {
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

/* Text inherits its container's color, so muted containers set it once */
p, li, blockquote {
  font-size: var(--fs-base);
  line-height: 1.7;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}