/* Maestria — warm paper, soft depth, terracotta accent. See design-system/maestria/MASTER.md. */
:root {
  --bg: #f5f2ec; /* warm paper */
  --surface: #ffffff; /* cards */
  --surface-2: #f1ece3; /* insets / subtle fills */
  --border: #e7e1d5; /* soft warm border */
  --card-border: transparent; /* cards float on their shadow in light mode */
  --text: #2a2723; /* warm near-black */
  --muted: #6c6458; /* warm gray, 4.5:1 on every surface */
  --accent: #a9502f; /* terracotta, 4.5:1 for links and white button text */
  --accent-2: #923f25; /* terracotta, darker (hover) */
  --accent-soft: rgba(169, 80, 47, 0.1);
  --on-accent: #ffffff; /* text on accent fills */
  --green: #3a7049;
  --amber: #87590f;
  --red: #b4432e;
  --teal: #23716f; /* due reviews */
  --radius-lg: 20px; /* cards, panels, modals */
  --radius: 14px; /* nested panels */
  --radius-md: 12px; /* tiles, inputs, popovers */
  --radius-sm: 8px; /* small chips, flashes */
  --radius-pill: 999px; /* buttons, nav bubble, badges */
  /* Type scale (rem, 16px base). */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.15rem;
  --text-lg: 1.3rem;
  --text-xl: 1.6rem;
  --text-2xl: 2rem;
  --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
  --duration: 0.15s;
  --shadow: 0 1px 2px rgba(50, 38, 28, 0.05), 0 8px 24px rgba(50, 38, 28, 0.07);
  --shadow-lg: 0 2px 4px rgba(50, 38, 28, 0.06), 0 16px 40px rgba(50, 38, 28, 0.14);
  --grain: 5%; /* paper dot density, see body */
  --halo: linear-gradient(180deg, var(--accent-soft), transparent 260px);
  --header-bg: color-mix(in srgb, var(--bg) 75%, transparent);
  --font-serif: "Literata", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
  --font-sans:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

/* Night theme — applied when <html data-theme="dark"> (set before paint by an inline
   script from localStorage or the OS preference; toggled from the settings menu). */
:root[data-theme="dark"] {
  --bg: #181511; /* warm near-black */
  --surface: #211d18; /* cards */
  --surface-2: #2a251f; /* insets / subtle fills */
  --border: #39322b; /* warm border */
  --card-border: var(--border); /* shadows barely read on dark, keep a hairline */
  --text: #ece6db; /* warm off-white */
  --muted: #a99e8d; /* warm gray */
  --accent: #e0795a; /* terracotta, brighter for dark */
  --accent-2: #ee9070; /* terracotta hover */
  --accent-soft: rgba(224, 121, 90, 0.14);
  --on-accent: #181511; /* white on bright terracotta is only 3:1 */
  --green: #6fb389;
  --amber: #d6a95e;
  --red: #e5806b;
  --teal: #5fbdb5;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.5);
  --grain: 4%;
  color-scheme: dark;
}