/* ─────────────────────────────────────────────────────────────
   WordWeft v2 · design tokens
   Purple-primary, Lavender Evening default. Dark / light support.
   Layered after the legacy tokens in style.css to remap them.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Lavender Evening — softer, dustier purple everywhere (default) */
  --ww-bg-0: #160B2E;
  --ww-bg-1: #1E1238;
  --ww-bg-2: #291847;
  --ww-bg-3: #362259;

  --ww-ink-0: #EEE6FF;
  --ww-ink-1: #C7B8E8;
  --ww-ink-2: #8D7FAE;
  --ww-ink-3: #5A4F75;
  --ww-hair:  rgba(238,230,255,0.09);
  --ww-hair-2: rgba(238,230,255,0.16);

  --ww-violet-50:  #EEEAFF;
  --ww-violet-100: #D8CFFF;
  --ww-violet-200: #B8A8FF;
  --ww-violet-300: #9A87F2;
  --ww-violet-400: #7C6FE8;   /* primary */
  --ww-violet-500: #5B4FCC;
  --ww-violet-600: #3F34A0;
  /* CTA fill for .btn-primary. Darker than violet-400 so white text clears
     the 4.5:1 AA threshold (white on #6C5FD8 ≈ 4.92:1). Kept separate from
     violet-400 because that token is also used as TEXT on dark backgrounds,
     where darkening it would REDUCE contrast (≈4.72:1 → ≈3.80:1). */
  --ww-violet-cta: #6C5FD8;

  --ww-gold:      #E8A63E;
  --ww-gold-soft: #F5C26A;
  --ww-fuchsia:   #E85A8A;
  --ww-teal:      #6BB8E8;
  --ww-emerald:   #4AC29A;
  --ww-coral:     #E86F5A;
  --ww-violet-glow: rgba(124,111,232,0.40);

  --ww-display: "Plus Jakarta Sans", "Inter Tight", system-ui, -apple-system, sans-serif;
  --ww-body:    "Inter", -apple-system, system-ui, sans-serif;
  --ww-serif:   "Source Serif 4", "Lora", Georgia, serif;
  --ww-mono:    "JetBrains Mono", ui-monospace, monospace;

  --ww-shadow-card:   0 6px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) inset;
  --ww-shadow-raised: 0 10px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset;
  --ww-shadow-violet: 0 8px 28px rgba(124,111,232,0.40);

  --ww-surface-glow: radial-gradient(ellipse at top, rgba(154,135,242,0.14), transparent 60%);

  /* ── Remap legacy tokens to the new palette so existing CSS picks it up ── */
  --bg-primary:     var(--ww-bg-0);
  --bg-secondary:   var(--ww-bg-1);
  --bg-card:        var(--ww-bg-2);
  --bg-input:       var(--ww-bg-3);
  --accent-indigo:  var(--ww-violet-400);
  --accent-purple:  var(--ww-violet-300);
  --accent-green:   var(--ww-emerald);
  --accent-red:     var(--ww-coral);
  --accent-amber:   var(--ww-gold);
  --text-primary:   var(--ww-ink-0);
  --text-secondary: var(--ww-ink-1);
  --text-muted:     var(--ww-ink-2);
  --text-dim:       var(--ww-ink-3);
  --border:         var(--ww-hair-2);

  /* ── Non-color layout tokens ───────────────────────────────────
     Preserved here after the duplicate legacy :root was removed from
     style.css. ww2-tokens.css only remapped the *color* tokens, so these
     (radii + iOS safe-area insets) had no home once that block was deleted.
     env(safe-area-inset-*) only resolves to a non-zero value once the
     viewport carries viewport-fit=cover (see index.html). */
  --radius:      16px;
  --radius-sm:   12px;
  --radius-xs:   8px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
}

/* ── LIGHT MODE — parchment-purple ─────────────────────────── */
body.light-theme {
  --ww-bg-0: #F0E8FF;
  --ww-bg-1: #FFFFFF;
  --ww-bg-2: #F6EEFF;
  --ww-bg-3: #E4D7FA;
  --ww-ink-0: #1A0E36;
  --ww-ink-1: #4A3A6B;
  --ww-ink-2: #6E5E8E;
  --ww-ink-3: #A696BD;
  --ww-hair: rgba(26,14,54,0.10);
  --ww-hair-2: rgba(26,14,54,0.16);
  --ww-shadow-card:   0 4px 20px rgba(61,45,107,0.10);
  --ww-shadow-raised: 0 8px 32px rgba(61,45,107,0.14);
  --ww-surface-glow: radial-gradient(ellipse at top, rgba(124,111,232,0.10), transparent 60%);

  --bg-primary:     var(--ww-bg-0);
  --bg-secondary:   var(--ww-bg-1);
  --bg-card:        var(--ww-bg-2);
  --bg-input:       var(--ww-bg-3);
  --text-primary:   var(--ww-ink-0);
  --text-secondary: var(--ww-ink-1);
  --text-muted:     var(--ww-ink-2);
  --text-dim:       var(--ww-ink-3);
  --border:         var(--ww-hair-2);
}

/* ── Base typography ──────────────────────────────────────── */
html, body {
  font-family: var(--ww-body);
}

h1, h2, h3, h4 {
  font-family: var(--ww-display);
  letter-spacing: -0.01em;
  color: var(--ww-ink-0);
}
h1 { font-weight: 800; letter-spacing: -0.02em; }
h2 { font-weight: 800; }

/* ── Utility classes available app-wide ───────────────────── */
.ww-display { font-family: var(--ww-display); font-weight: 800; color: var(--ww-ink-0); letter-spacing: -0.02em; }
.ww-serif   { font-family: var(--ww-serif); font-style: italic; color: var(--ww-ink-1); }
.ww-mono    { font-family: var(--ww-mono); font-weight: 500; color: var(--ww-ink-2); letter-spacing: 0.04em; }
.ww-eyebrow { font-family: var(--ww-body); font-weight: 700; color: var(--ww-violet-200); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

/* WordWeft wordmark — "Word" upright + "Weft" italic violet */
.ww-wordmark {
  font-family: var(--ww-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ww-ink-0);
  display: inline-block;
}
.ww-wordmark .weft {
  font-style: italic;
  color: var(--ww-violet-300);
  font-weight: 700;
}