/* SWFL Spotlight — Design tokens
 * Extracted from the MelloD Designs brand kit (v1).
 * These CSS custom properties are consumed by swfl-article.css and any
 * hand-written CSS in block patterns. theme.json mirrors the same values
 * as WP preset variables (--wp--preset--color--swfl-teal, etc.) for
 * the block editor.
 */

:root {
  /* ---------- Brand colors ---------- */
  --swfl-teal:        #0fc3ce;
  --swfl-teal-deep:   #0aa3ad;
  --swfl-teal-soft:   #c6eff2;
  --swfl-teal-wash:   #eaf9fa;

  --swfl-amber:       #fec107;
  --swfl-amber-deep:  #e0a800;
  --swfl-amber-soft:  #ffe9a1;
  --swfl-amber-wash:  #fff8e0;

  --swfl-slate:       #141414;
  --swfl-slate-2:     #2a2a2a;
  --swfl-slate-3:     #5a5a5a;
  --swfl-slate-4:     #8a8a8a;

  --swfl-sand:        #f6f2e9;
  --swfl-sand-2:      #eee8d9;
  --swfl-white:       #ffffff;
  --swfl-off-white:   #fafaf7;

  --swfl-line:        #e9e4d7;
  --swfl-line-strong: #d6cfb9;
  --swfl-line-cool:   #e3eef0;

  /* Semantic foreground */
  --fg-1: var(--swfl-slate);
  --fg-2: var(--swfl-slate-2);
  --fg-3: var(--swfl-slate-3);
  --fg-4: var(--swfl-slate-4);

  /* Semantic background */
  --bg-page:    var(--swfl-sand);
  --bg-surface: var(--swfl-white);
  --bg-raised:  var(--swfl-off-white);
  --bg-sunk:    var(--swfl-sand-2);
  --bg-dark:    var(--swfl-slate);

  /* ---------- Typography ---------- */
  --font-display: 'Libre Baskerville', 'Iowan Old Style', 'Source Serif Pro', Georgia, serif;
  --font-body:    'Nunito Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --fs-h1: 3.25rem;
  --fs-h2: 2.375rem;
  --fs-h3: 1.75rem;
  --fs-h4: 1.375rem;
  --fs-lg: 1.25rem;
  --fs-body: 1.125rem;
  --fs-ui: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  --ls-eyebrow: 0.14em;
  --ls-button:  0.01em;
  --ls-display: -0.01em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:   0 1px 2px rgba(20,20,20,0.06);
  --shadow-sm:   0 2px 6px rgba(20,20,20,0.07), 0 1px 2px rgba(20,20,20,0.04);
  --shadow-md:   0 8px 20px rgba(20,20,20,0.08), 0 2px 4px rgba(20,20,20,0.04);
  --shadow-lg:   0 20px 40px rgba(20,20,20,0.12), 0 4px 8px rgba(20,20,20,0.05);
  --shadow-sun:  0 10px 30px rgba(254,193,7,0.25);
  --shadow-wave: 0 10px 30px rgba(15,195,206,0.22);
  --ring-focus:  0 0 0 3px rgba(15,195,206,0.35);

  /* ---------- Motion ---------- */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-swell:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;

  /* ---------- Layout ---------- */
  --max-prose:   68ch;
  --max-content: 1120px;
  --max-wide:    1440px;
}