/* theme.css — ONLY CSS variables. A site's whole look changes from this file.
   Tokens {{COLOR_*}} are filled by tools/new_site.py from site.json.
   Presets: the default (light) below, plus [data-theme="cinematic"] (dark).
   Switch preset with <html data-theme="cinematic">. */

:root {
  /* Colour */
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-surface-2: #f1f4f8;
  --c-text: #111418;
  --c-muted: #39424e;          /* ≥ 4.5:1 on --c-bg */
  --c-border: #c9d1db;
  --c-primary: #1b3a6b;
  --c-primary-ink: #ffffff;    /* text on primary */
  --c-accent: #ffd23f;
  --c-accent-ink: #111418;
  --c-focus: #1a5fd0;
  --c-banner-bg: #111418;
  --c-banner-ink: #fbfaf7;
  --c-scrim: rgba(12, 10, 8, .62);
  --c-whatsapp: #1f8f4e;       /* darker than brand green for 4.5:1 with white */

  /* Type */
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, Verdana, Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --fw-body: 400;
  --fw-display: 700;
  --ls-display: 0;
  --tt-display: none;
  --lh-body: 1.65;
  --lh-display: 1.08;
  --fs-base: 1.25rem;       /* large, for older customers */
  --fs-small: 1.05rem;
  --fs-lead: clamp(1.1rem, .6vw + 1rem, 1.3rem);
  --fs-h1: clamp(2.4rem, 4vw + 1rem, 4rem);
  --fs-h2: clamp(1.7rem, 2.4vw + 1rem, 2.7rem);
  --fs-h3: clamp(1.35rem, .5vw + 1.1rem, 1.6rem);
  --fs-kinetic: clamp(4rem, 16vw, 14rem);

  /* Shape & space */
  --radius: 6px;
  --radius-lg: 10px;
  --radius-btn: 8px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: clamp(4.5rem, 8vw, 7.5rem);
  --container: 1160px;
  --header-h: 76px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.06), 0 18px 40px rgba(0,0,0,.12);

  /* Motion personality (playful bakery vs calm accounting) */
  --motion-speed: 320ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
  --motion-distance: 10px;
  --motion-stagger: 40ms;
}

/* Truefit: white, ink, navy and tape-measure yellow. Big type, high contrast, calm motion. */

/* Dark "cinematic" preset (kinetic type, starfield). */
[data-theme="cinematic"] {
  --c-bg: #0b0a0d;
  --c-surface: #15131a;
  --c-surface-2: #1d1a23;
  --c-text: #f3eff6;
  --c-muted: #b9b1c2;
  --c-border: #2c2833;
  --c-primary-ink: #0b0a0d;
  --c-focus: #9cc2ff;
  --c-banner-bg: #f3eff6;
  --c-banner-ink: #0b0a0d;
  --c-scrim: rgba(5, 4, 8, .66);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 22px 50px rgba(0,0,0,.6);
}