/* Visual layer: every colour, font, radius and shadow lives here.
   Replace this file to restyle the site; layout.css only uses these tokens.
   Current values: clean black and white with an Apple-like sans (SF Pro on Apple devices,
   Inter elsewhere), sentence case everywhere. */

:root {
  /* Colour */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f4f4f2;
  --text: #111111;
  --muted: #6b6b6b;
  --line: #e3e3e0;
  --accent: #111111;
  --on-accent: #ffffff;
  --accent-soft: #f0f0ee;
  --good: #2f6b3a;
  --good-strong: #1f7a3d;
  --on-good: #ffffff;
  --region: #2b4f9e;
  --on-region: #ffffff;
  --warn: #9a3d22;
  --placeholder: #e9e9e6;
  --placeholder-text: #9a9a96;
  --overlay: rgba(0, 0, 0, 0.12);

  /* Type */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --display-weight: 600;
  --font-accent: "Instrument Serif", "Iowan Old Style", Georgia, serif;   /* the italic half of the hero title */
  --display-transform: none;
  --display-tracking: -0.025em;
  --label-transform: none;      /* small labels, badges and buttons */
  --label-tracking: 0;
  --size-hero: clamp(40px, 7vw, 64px);
  --size-page: clamp(28px, 4.5vw, 40px);
  --size-card: 19px;
  --size-body: 15px;
  --size-small: 13px;
  --size-label: 13px;

  /* Shape */
  --radius-card: 18px;
  --radius-media: 18px;
  --radius-pill: 999px;
  --shadow-menu: 0 12px 40px rgba(0, 0, 0, 0.14);
  --radius-carousel: 32px;
  --shadow-card: 0 10px 30px rgba(95, 109, 119, 0.08), 0 4px 12px rgba(95, 109, 119, 0.06);
  --shadow-raised: 0 14px 40px rgba(60, 64, 70, 0.16), 0 4px 14px rgba(60, 64, 70, 0.10);  /* carousel cards: a bit more lift than --shadow-card */

  /* Motion */
  --ease-spring: cubic-bezier(0.22, 1.12, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111111; --surface: #181818; --surface-alt: #1e1e1e; --text: #f2f2f0; --muted: #a3a3a0;
    --line: #2f2f2d; --accent: #f2f2f0; --on-accent: #111111; --accent-soft: #262624;
    --good: #8fd19c; --warn: #f0a684; --placeholder: #262624; --placeholder-text: #77776f;
    --good-strong: #8fd19c; --on-good: #0e1f13;
    --region: #9db8f2; --on-region: #0d1630;
    --overlay: rgba(0, 0, 0, 0.3); --shadow-menu: 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-raised: 0 0 0 1px #262624, 0 10px 30px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111111; --surface: #181818; --surface-alt: #1e1e1e; --text: #f2f2f0; --muted: #a3a3a0;
  --line: #2f2f2d; --accent: #f2f2f0; --on-accent: #111111; --accent-soft: #262624;
  --good: #8fd19c; --warn: #f0a684; --placeholder: #262624; --placeholder-text: #77776f;
  --good-strong: #8fd19c; --on-good: #0e1f13;
  --region: #9db8f2; --on-region: #0d1630;
  --overlay: rgba(0, 0, 0, 0.3); --shadow-menu: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-raised: 0 0 0 1px #262624, 0 10px 30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}