/*
 * Theme tokens for federicocarrer.it.
 *
 * Direction (T019.1, iter 3): cool-neutral SaaS / internal-tools
 * register. Slate-based palette, indigo accent, system-sans body.
 * The geometric stack is preserved for the wordmark + nav-link
 * (carry-over from the warm-paper iteration).
 *
 *   --font-stack-system     → primary UI + body; tracks the OS
 *                             sans (San Francisco / Segoe UI / Inter
 *                             when available).
 *   --font-stack-geometric  → wordmark + nav (URW Gothic / Avenir
 *                             family); kept for brand continuity.
 *   --font-stack-serif      → kept for opt-in long-form prose blocks
 *                             only; no longer the default heading.
 *
 * The browser drives the dark/light choice via prefers-color-scheme;
 * there is deliberately no JS theme toggle (no cookies, no
 * sessionStorage flag).
 */

:root {
  --font-stack-serif:
    "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style",
    "Hoefler Text", Times, serif;
  --font-stack-geometric:
    "URW Gothic", "Century Gothic", "Avenir Next", Avenir, "Futura PT",
    Futura, "Trebuchet MS", system-ui, sans-serif;
  --font-stack-system:
    "Inter", "InterVariable", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-section: 3rem;

  --measure: 38rem;
  --container: 64rem;
  --radius: 0.5rem;

  --header-height: 3.5rem;
  --sidebar-width: 16rem;
}

/* Light is the default and applies whenever no explicit data-theme
 * is set or when data-theme="light". Dark is layered via either an
 * OS preference (when no explicit override) or via data-theme="dark"
 * (forced regardless of OS). Order matters: explicit light override
 * comes last so it always wins. */
:root {
  --color-bg: #f6f8fb;
  --color-surface: #ffffff;
  --color-fg: #0f172a;
  --color-muted: #64748b;
  --color-rule: #e2e8f0;
  --color-rule-strong: #cbd5e1;
  --color-accent: #0284c7;
  --color-accent-fg: #ffffff;
  --color-accent-soft: #f0f9ff;
  --color-danger: #dc2626;
  --color-danger-soft: #fef2f2;
  --color-header-bg: #ffffff;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
  }

  body {
    color: #0f172a;
    background-color: #f6f8fb;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b1120;
    --color-surface: #111a2e;
    --color-fg: #e2e8f0;
    --color-muted: #94a3b8;
    --color-rule: #1e293b;
    --color-rule-strong: #334155;
    --color-accent: #38bdf8;
    --color-accent-fg: #082f49;
    --color-accent-soft: #0c4a6e;
    --color-danger: #f87171;
    --color-danger-soft: #2a1416;
    --color-header-bg: #0f172a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }

  body {
    color: #e2e8f0;
    background-color: #0b1120;
  }
}

:root[data-theme="dark"] {
  --color-bg: #0b1120;
  --color-surface: #111a2e;
  --color-fg: #e2e8f0;
  --color-muted: #94a3b8;
  --color-rule: #1e293b;
  --color-rule-strong: #334155;
  --color-accent: #38bdf8;
  --color-accent-fg: #082f49;
  --color-accent-soft: #0c4a6e;
  --color-danger: #f87171;
  --color-danger-soft: #2a1416;
  --color-header-bg: #0f172a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

body {
  color: var(--color-fg);
  background-color: var(--color-bg);
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-stack-system);
  line-height: 1.55;
  min-height: 100vh;
}

a {
  color: var(--color-accent);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}