/* ============================================================
   WAREWELL — DESIGN TOKENS (Program 0)
   Source of truth: WAREWELL_FRONTEND_MASTER_BUILD_BLUEPRINT
   Design token lock — do not invent colors outside this file.
   ============================================================ */

:root {
  /* ---------- Primitive colors (locked) ---------- */
  --ww-porcelain:       #F6F3EE;
  --ww-porcelain-warm:  #FFF9F0;
  --ww-carbon:          #111111;
  --ww-graphite:        #303030;
  --ww-olive:           #3F4A2F;
  --ww-olive-dark:      #26311E;
  --ww-clay-coral:      #CF5A42;
  --ww-saffron:         #E1A52E;
  --ww-champagne:       #E6D9C2;
  --ww-taupe:           #8B8276;
  --ww-cream:           #F3EBDD;
  --ww-ink-muted:       #5B5852;
  --ww-ink-soft:        #6E675D;   /* WCAG AA at 12px+ on porcelain — replaces taupe for small text */
  --ww-line:            #D8D0C2;
  --ww-success:         #2F6B3C;
  --ww-warning:         #B87916;
  --ww-danger:          #A33A2B;
  --ww-social-citrus:   #DFFF2F;

  /* ---------- Semantic roles ---------- */
  --ww-bg:              var(--ww-porcelain);
  --ww-surface:         #FFFFFF;
  --ww-surface-soft:    var(--ww-cream);
  --ww-ink:             var(--ww-carbon);
  --ww-ink-2:           var(--ww-graphite);
  --ww-ink-3:           var(--ww-ink-muted);
  --ww-brand:           var(--ww-olive);
  --ww-brand-deep:      var(--ww-olive-dark);
  --ww-cta:             var(--ww-clay-coral);
  --ww-accent:          var(--ww-saffron);
  --ww-social:          var(--ww-social-citrus);
  --ww-border:          var(--ww-line);

  /* ---------- Typography ---------- */
  --ww-font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --ww-font-body:    "Satoshi", "Avenir Next", "Trebuchet MS", sans-serif;
  --ww-font-mono:    "Space Mono", "IBM Plex Mono", Consolas, monospace;

  /* Type scale */
  --ww-text-hero:    clamp(44px, 5vw, 64px);
  --ww-text-display: 40px;
  --ww-text-title:   28px;
  --ww-text-h2:      22px;
  --ww-text-h3:      18px;
  --ww-text-body:    16px;
  --ww-text-sm:      14px;
  --ww-text-caption: 12px;
  --ww-text-micro:   11px;

  --ww-track-caps:   0.18em;
  --ww-track-wide:   0.08em;

  /* ---------- Geometry (locked ranges) ---------- */
  --ww-radius-panel:  16px;   /* app panels 12–20 */
  --ww-radius-card:   14px;   /* item cards 12–18 */
  --ww-radius-button: 16px;   /* buttons 14–18 */
  --ww-radius-pill:   999px;  /* filters / status / segments only */
  --ww-radius-scale:  1;      /* tweakable multiplier */

  /* ---------- Spacing ---------- */
  --ww-s1: 4px;
  --ww-s2: 8px;
  --ww-s3: 12px;
  --ww-s4: 16px;
  --ww-s5: 20px;
  --ww-s6: 24px;
  --ww-s7: 32px;
  --ww-s8: 40px;
  --ww-s9: 56px;
  --ww-s10: 80px;

  /* ---------- Elevation ---------- */
  --ww-shadow-1: 0 1px 2px rgba(17,17,17,0.05);
  --ww-shadow-2: 0 6px 20px -6px rgba(17,17,17,0.12);
  --ww-shadow-3: 0 18px 44px -12px rgba(17,17,17,0.18);

  /* ---------- Motion (locked ranges) ---------- */
  --ww-dur-control:    180ms;  /* UI controls 150–220 */
  --ww-dur-transition: 280ms;  /* screen transitions 220–360 */
  --ww-ease:           cubic-bezier(0.32, 0.72, 0.24, 1);
  --ww-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ww-dur-control: 0ms;
    --ww-dur-transition: 0ms;
  }
}

/* ---------- Dark theme (P9.3) — derived only from locked primitives ---------- */
[data-ww-theme="dark"] {
  --ww-bg:           #111111;                       /* carbon */
  --ww-ink-soft:     #B5AB9C;
  --ww-surface:      #232320;                       /* carbon → graphite blend */
  --ww-surface-soft: #1B1D17;                       /* carbon × olive-dark */
  --ww-ink:          #F6F3EE;                       /* porcelain */
  --ww-ink-2:        #F3EBDD;                       /* cream */
  --ww-ink-3:        #A99F90;                       /* taupe, lifted */
  --ww-border:       rgba(246, 243, 238, 0.16);
  --ww-brand:        #4A5739;                       /* olive, lifted for contrast */
  --ww-brand-deep:   #3F4A2F;
  --ww-shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --ww-shadow-2: 0 6px 20px -6px rgba(0,0,0,0.55);
  --ww-shadow-3: 0 18px 44px -12px rgba(0,0,0,0.65);
}