/* theme.css — ONLY CSS variables. A site's whole look changes from this file.
   Walk-In Studio showroom: cinematic preset (<html data-theme="cinematic">), warm amber accent.
   Presets: the default (light) below, plus [data-theme="cinematic"] (dark).
   Switch preset with <html data-theme="cinematic">. */

:root {
  /* Colour */
  --c-bg: #fbfaf7;
  --c-surface: #ffffff;
  --c-surface-2: #f2efe8;
  --c-text: #1d1b18;
  --c-muted: #5a554d;          /* ≥ 4.5:1 on --c-bg */
  --c-border: #e3ded3;
  --c-primary: #f2b544;
  --c-primary-ink: #ffffff;    /* text on primary */
  --c-accent: #ffd88a;
  --c-accent-ink: #1d1b18;
  --c-focus: #1a5fd0;
  --c-banner-bg: #1d1b18;
  --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: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, "SF Pro Display", system-ui, Roboto, sans-serif;
  --fw-body: 400;
  --fw-display: 650;
  --ls-display: -0.035em;
  --tt-display: none;
  --lh-body: 1.6;
  --lh-display: 1.08;
  --fs-base: 1.125rem;
  --fs-small: .9rem;
  --fs-lead: clamp(1.1rem, .6vw + 1rem, 1.3rem);
  --fs-h1: clamp(2.5rem, 6vw + 1rem, 6rem);
  --fs-h2: clamp(1.7rem, 2.4vw + 1rem, 2.7rem);
  --fs-h3: clamp(1.15rem, .5vw + 1rem, 1.35rem);
  --fs-kinetic: clamp(4rem, 16vw, 14rem);

  /* Shape & space */
  --radius: 10px;
  --radius-lg: 18px;
  --radius-btn: 999px;
  --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: 68px;
  --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: 520ms;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-distance: 28px;
  --motion-stagger: 70ms;
}

/* 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);
  --c-whatsapp: #1f8f4e;
  --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);
}