/* ==========================================================================
   Code Quatre — Design variables
   Everything is beautiful. 4 px base, because… Quatre.
   Dark mode by default, light mode via [data-theme="light"].

   Fonts: both hosted in fonts/ (SIL OFL), declared below.
   - Headings: Josefin Sans, variable 100–700
   - Body    : Mulish, variable 200–1000, normal + italic
   ========================================================================== */

@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/josefin-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/mulish-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/mulish-latin-wght-italic.woff2") format("woff2");
}

:root {
  /* ---------- Base palette ---------- */
  --bark: #0a0908;
  --rust: #b8561f; /* accent in light mode (fills, large headings) */
  --rust-dark: #97451a; /* text accent in light mode (AA 5.6:1) */
  --rust-light: #db7a3f; /* accent in dark mode (AA 5.4:1 on Bark) */
  --sweet-cream: #ffe3bd;
  --creamier: #ffecd1;
  --sage: #6b7a5a; /* success states only */

  /* ---------- Typography: font families ---------- */
  --font-heading: "Josefin Sans", "Futura", "Century Gothic", sans-serif;
  --font-body: "Mulish", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Typography: fluid scale (360 px → 1440 px) ---------- */
  --size-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --size-s: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --size-base: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --size-l: clamp(1.25rem, 1.17rem + 0.37vw, 1.5rem);
  --size-xl: clamp(1.5rem, 1.33rem + 0.74vw, 2rem);
  --size-2xl: clamp(2rem, 1.67rem + 1.48vw, 3rem);
  --size-hero: min(12vw, 30svh); /* CODE QUATRE */
  --size-menu: min(10vw, 18svh); /* open menu links */
  --size-poster: min(8.5vw, 22svh); /* Travaillons ensemble */

  --line-height-heading: 0.95;
  --line-height-body: 1.6;
  --tracking-heading: -0.01em;
  --weight-heading-thin: 100; /* hero, menu, contact */
  --weight-heading: 300; /* chapters, names, buttons */
  --measure: 64ch;

  /* ---------- Spacing: 4 px base ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-48: 12rem;

  /* ---------- Layout ---------- */
  --rail: 4rem; /* left vertical bar (hamburger, counter) */
  --mobile-bar: 3.5rem;
  --page-margin: clamp(var(--space-4), 4vw, var(--space-16));

  /* ---------- Radii ---------- */
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-pill: 28px;

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
  --duration-menu: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Layering ---------- */
  --z-base: 0;
  --z-nav: 100;
  --z-menu: 1000;
}

/* ---------- Roles: dark mode (default) ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: var(--bark);
  --c-menu: color-mix(in srgb, var(--sweet-cream) 4%, var(--bark));
  --c-text: var(--creamier);
  --c-text-soft: color-mix(in srgb, var(--sweet-cream) 64%, var(--bark));
  --c-text-muted: color-mix(in srgb, var(--sweet-cream) 32%, var(--bark));
  --c-border: color-mix(in srgb, var(--sweet-cream) 16%, var(--bark));
  --c-image: color-mix(in srgb, var(--sweet-cream) 9%, var(--bark));
  --c-accent: var(--rust-light);
  --c-accent-text: var(--rust-light);
  --c-accent-soft: color-mix(in srgb, var(--rust) 30%, var(--bark));
  --c-success: var(--sage);
}

/* ---------- Roles: light mode ---------- */
[data-theme="light"] {
  color-scheme: light;
  --c-bg: var(--sweet-cream);
  --c-menu: color-mix(in srgb, var(--bark) 4%, var(--sweet-cream));
  --c-text: var(--bark);
  --c-text-soft: color-mix(in srgb, var(--bark) 68%, var(--sweet-cream));
  --c-text-muted: color-mix(in srgb, var(--bark) 30%, var(--sweet-cream));
  --c-border: color-mix(in srgb, var(--bark) 16%, var(--sweet-cream));
  --c-image: color-mix(in srgb, var(--bark) 12%, var(--sweet-cream));
  --c-accent: var(--rust);
  --c-accent-text: var(--rust-dark);
  --c-accent-soft: color-mix(in srgb, var(--rust) 20%, var(--sweet-cream));
  --c-success: var(--sage);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-menu: 0ms;
  }
}