/* ─── Design Tokens ──────────────────────────────────────────────────────────
   Colors below are NEVER hardcoded here — every color value is either a
   Customizer-controlled variable (set in wps_inline_styles(), includes/
   customizer/customizer.php) or a value derived from one via color-mix().
   The declarations directly under :root are only a fallback for the brief
   window before WordPress' inline <style> block prints (it always wins).

   Role names used by the component CSS (lantern/ink/paper/coral/sage…) are
   aliases of the 10 Customizer roles:
     lantern = primary   coral = secondary   ink = text   paper = bg
     paper-2 = bg-light  card = surface      line = border
     sage-ink = positive coral-ink = negative muted = text-muted
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Base colors — sourced from Customizer ─── */
  --primary-color: #ffb23f;
  --secondary-color: #ff6b4a;
  --text-color: #14213d;
  --text-muted: #46526f;
  --bg-light: #fbebd0;
  --bg-color: #fff8ec;
  --surface-color: #ffffff;
  --border-color: #ead9bb;
  --positive-color: #3d5c45;
  --negative-color: #b3381b;

  /* ─── Role aliases ─── */
  --lantern: var(--primary-color);
  --coral: var(--secondary-color);
  --ink: var(--text-color);
  --paper: var(--bg-color);
  --paper-2: var(--bg-light);
  --card: var(--surface-color);
  --line: var(--border-color);
  --muted: var(--text-muted);
  --sage-ink: var(--positive-color);
  --coral-ink: var(--negative-color);

  /* ─── Derived shades — computed from the base colors, no literals ─── */
  --lantern-soft: color-mix(in srgb, var(--primary-color) 40%, white);
  --lantern-deep: color-mix(in srgb, var(--primary-color) 88%, black);
  --lantern-ink: color-mix(in srgb, var(--primary-color) 38%, black);
  --coral-soft: color-mix(in srgb, var(--secondary-color) 30%, white);
  --sage: color-mix(in srgb, var(--positive-color) 50%, white);
  --sage-soft: color-mix(in srgb, var(--positive-color) 22%, white);
  --ink-2: color-mix(in srgb, var(--text-color) 86%, white);
  --ink-deep: color-mix(in srgb, var(--text-color) 72%, black);
  --on-dark: var(--paper);
  --on-dark-muted: color-mix(in srgb, var(--paper) 80%, var(--ink));
  --on-dark-faint: color-mix(in srgb, var(--paper) 62%, var(--ink));

  /* Pure neutral, not a brand color (contrast text on colored surfaces) */
  --white: #ffffff;

  /* ─── Shape, depth, motion ─── */
  --r-s: 12px;
  --r: 22px;
  --r-l: 32px;
  --shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--ink) 22%, transparent);
  --shadow-up: 0 2px 0 color-mix(in srgb, var(--ink) 6%, transparent), 0 22px 44px -16px color-mix(in srgb, var(--ink) 32%, transparent);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hover-duration: 0.25s;
  --gut: clamp(16px, 4vw, 40px);
}