/* ==========================================================================
   Design tokens — Carol Flores Hair & Makeup
   Values from guia-ui-webdesign-carol-flores.md §15 (ported 1:1 from the
   client's previous site; the dark palette is new work, explained in the
   guide's §5). Token NAMES are the engine contract — nothing renamed here,
   only values filled in, per _template/public_html/assets/css/tokens.css.

   ---------------------------------------------------------------------------
   THEME CONTRACT (light / dark) — same mechanism as the engine default.
   Every colour token is declared with light-dark(<light>, <dark>) and
   resolved by `color-scheme`. Four roles invert differently — the ones that
   most often cause a dark-mode bug if swapped:

     --color-structure     always-dark SURFACE (hero, footer, WhatsApp modal
                           header). Stays #0d0d0d in BOTH themes — the
                           brand's black is already the darkest tone in the
                           palette, there is no "second black" for dark mode.
     --color-heading       heading / strong foreground text. Dark on light,
                           light on dark. Never a background.
     --color-text-inverse  text that sits ON --color-structure. Always light.
     --color-on-accent     text that sits ON --color-accent. For THIS brand
                           it stays white in both themes: even lightened for
                           dark mode, the wine (#b8454e) is still dark enough
                           for white text (~5.5:1, verified in the guide §13).
                           Do not copy this "no invert" behaviour to another
                           project without checking its own accent contrast.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Brand raw accent, outside the engine's token contract on purpose:
     gold is decorative-only (hero eyebrow/H1 highlight, WhatsApp FAB
     override lives in main.css) and — per the guide — never changes between
     themes because its only context (dark hero/footer/widget header) never
     changes either. See guide §5.3/§15. --- */
  --color-gold: #b08d57;

  /* --- Colours — wine + black + cream, gold accent (guide §3.2/§15) --- */
  --color-base: #ffffff;
  --color-base: light-dark(#ffffff, #17120f);
  --color-surface: #f2f2f2;
  --color-surface: light-dark(#f2f2f2, #221b17);
  --color-structure: #0d0d0d;
  --color-structure: light-dark(#0d0d0d, #0d0d0d);
  --color-heading: #0d0d0d;
  --color-heading: light-dark(#0d0d0d, #f5efe8);
  --color-accent: #400101;
  --color-accent: light-dark(#400101, #b8454e);
  --color-accent-hover: #6b1414;
  --color-accent-hover: light-dark(#6b1414, #ce5760);
  --color-accent-soft: rgba(64, 1, 1, 0.08);
  --color-accent-soft: light-dark(rgba(64, 1, 1, 0.08), rgba(184, 69, 78, 0.16));
  --color-on-accent: #ffffff;
  --color-on-accent: light-dark(#ffffff, #ffffff);
  --color-text-primary: #2b2b2b;
  --color-text-primary: light-dark(#2b2b2b, #e6ddd4);
  --color-text-secondary: #6b6b6b;
  --color-text-secondary: light-dark(#6b6b6b, #a89e93);
  --color-text-inverse: #ffffff;
  --color-text-inverse: light-dark(#ffffff, #f5efe8);
  --color-border: #e3e0df;
  --color-border: light-dark(#e3e0df, #362d28);
  --color-error: #b3261e;
  --color-error: light-dark(#b3261e, #f2897e);
  --color-success: #2e6b47;
  --color-success: light-dark(#2e6b47, #7bc99a);
  --color-draft: #7a5b1f;                                  /* engine default, unchanged */
  --color-draft: light-dark(#7a5b1f, #d8b256);
  --color-on-draft: #ffffff;
  --color-on-draft: light-dark(#ffffff, #17130a);

  /* --- Typography — single family (Poppins) for display AND body, on
     purpose: hierarchy comes from weight (400–800), never a second family
     (guide §3.1/§4). --- */
  --font-display: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Poppins', 'Segoe UI', Arial, sans-serif;

  /* Type scale — identical to the engine default except --text-hero, which
     is new and exclusive to the Home hero H1 (guide §4/§15). */
  --text-hero: clamp(2.4rem, 5vw, 4.2rem);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.2rem, 0.6vw + 1rem, 1.375rem);
  --text-2xl: clamp(1.45rem, 1vw + 1.1rem, 1.75rem);
  --text-3xl: clamp(1.8rem, 1.6vw + 1.2rem, 2.35rem);
  --text-4xl: clamp(2.2rem, 2.6vw + 1.3rem, 3.2rem);

  /* Spacing (8px base) — unchanged from the engine default; guide's
     mapping table (§6) confirms the motor scale already covers the
     original site's spacing within a few px in every step. */
  --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-20: 5rem;
  --space-24: 6rem;

  /* Radius — this brand's signature: generous, soft, pill buttons. Buttons
     need an explicit override to --radius-full in main.css (base.css's
     default .button uses --radius-md, which here is a card radius). */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 28px;   /* new — no current use, keeps the sm<md<lg progression for later */
  --radius-full: 9999px;

  /* Shadow — same geometry the previous site used, colour now themed so it
     stays legible on the dark surface too. */
  --shadow-color: rgba(13, 13, 13, 0.08);
  --shadow-color: light-dark(rgba(13, 13, 13, 0.08), rgba(0, 0, 0, 0.55));
  --shadow-color-strong: rgba(13, 13, 13, 0.14);
  --shadow-color-strong: light-dark(rgba(13, 13, 13, 0.14), rgba(0, 0, 0, 0.65));
  --shadow-soft: 0 12px 32px var(--shadow-color);   /* new — reproduces the original card/photo shadow exactly */
  --shadow-card: 0 1px 2px var(--shadow-color), 0 8px 24px var(--shadow-color);
  --shadow-card-hover: 0 2px 4px var(--shadow-color-strong), 0 14px 34px var(--shadow-color-strong);

  /* Transitions — unchanged from the engine default */
  --transition-fast: 150ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 420ms ease;

  /* Layout */
  --container-max: 1160px;
  --header-height: 6rem;    /* engine default 4.5rem — raised to fit the 68px logo (guide §3.3/§6) */
  --logo-height: 68px;      /* engine default header logo is 2.5rem/40px — see main.css override */
}

/* Manual override, written by the theme toggle and restored before first
   paint by the inline script in includes/layout.php. Setting color-scheme is
   all it takes — every light-dark() token above follows. */
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark']  { color-scheme: dark; }