/* ============================================================
   WarmSignal — Canonical Design Tokens
   v1.0 · The single source of truth for color, type, space, motion.
   Import in any WarmSignal surface (site, deck, email, app).
   ============================================================ */

:root {
  /* ---------- COLOR · CANVAS ---------- */
  --ws-bg:          #0a0807;   /* Primary canvas — deep ember-black */
  --ws-bg-deep:     #050403;   /* Deeper canvas — for sunken surfaces */
  --ws-bg-surface:  #15110d;   /* Cards, panels, elevated surfaces */
  --ws-bg-rim:      #1f1a14;   /* Hairline rim against bg */
  --ws-paper:       #f5efe6;   /* Inverted canvas — warm paper */
  --ws-paper-deep:  #ebe5d8;   /* Inverted surface */

  /* ---------- COLOR · INK ---------- */
  --ws-ink:         #f5ede0;   /* Primary text on dark */
  --ws-ink-2:       #d4ccbe;   /* Secondary text on dark */
  --ws-ink-3:       #8a8276;   /* Tertiary / mono labels */
  --ws-ink-dark:    #14110d;   /* Primary text on paper */
  --ws-ink-dark-2:  #6b665d;   /* Secondary text on paper */

  /* ---------- COLOR · EMBER (the only accent) ---------- */
  --ws-ember-1:     #ff8a00;   /* Hot orange — primary accent */
  --ws-ember-2:     #ff3a3a;   /* Red core — for heat moments */
  --ws-ember-3:     #ffc837;   /* Amber crown — for light moments */
  --ws-ember-soft:  rgba(255, 138, 0, 0.18);   /* Glow halos */
  --ws-ember-faint: rgba(255, 138, 0, 0.06);   /* Subtle washes */

  --ws-ember-grad:    linear-gradient(135deg, var(--ws-ember-1) 0%, var(--ws-ember-2) 60%, var(--ws-ember-3) 100%);
  --ws-ember-grad-h:  linear-gradient(90deg,  var(--ws-ember-1), var(--ws-ember-2), var(--ws-ember-3));
  --ws-ember-grad-v:  linear-gradient(180deg, var(--ws-ember-3) 0%, var(--ws-ember-1) 60%, var(--ws-ember-2) 100%);
  --ws-ember-radial:  radial-gradient(60% 60% at 30% 70%, var(--ws-ember-soft) 0%, transparent 70%);

  /* ---------- COLOR · UTILITY ---------- */
  --ws-hairline:    rgba(245, 237, 224, 0.10);   /* Dividers on dark */
  --ws-hairline-2:  rgba(245, 237, 224, 0.18);
  --ws-hairline-d:  rgba(20, 17, 13, 0.10);      /* Dividers on paper */
  --ws-shadow-glow: 0 0 24px rgba(255, 138, 0, 0.35);
  --ws-shadow-card: 0 18px 60px rgba(0, 0, 0, 0.45);
  --ws-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.25);

  /* ---------- TYPE · FAMILIES ---------- */
  --ws-font-display: "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
  --ws-font-serif:   "Instrument Serif", "Times New Roman", Georgia, serif;
  --ws-font-mono:    "JetBrains Mono", "Menlo", monospace;

  /* ---------- TYPE · SCALE (fluid) ---------- */
  --ws-text-xs:    11px;
  --ws-text-sm:    13px;
  --ws-text-base:  16px;
  --ws-text-lg:    18px;
  --ws-text-xl:    22px;
  --ws-text-2xl:   clamp(28px, 3vw, 36px);
  --ws-text-3xl:   clamp(36px, 4.5vw, 56px);
  --ws-text-4xl:   clamp(48px, 6.5vw, 80px);
  --ws-text-hero:  clamp(56px, 9vw, 128px);

  /* ---------- TYPE · WEIGHTS ---------- */
  --ws-weight-light:   300;
  --ws-weight-regular: 400;
  --ws-weight-medium:  500;
  --ws-weight-semi:    600;

  /* ---------- TYPE · TRACKING ---------- */
  --ws-track-tight:  -0.025em;   /* Display headlines */
  --ws-track-snug:   -0.015em;   /* Body large */
  --ws-track-normal: 0;
  --ws-track-wide:   0.08em;     /* Mono eyebrows */
  --ws-track-loose:  0.18em;     /* All-caps labels */

  /* ---------- TYPE · LEADING ---------- */
  --ws-lead-display: 0.95;
  --ws-lead-tight:   1.1;
  --ws-lead-snug:    1.3;
  --ws-lead-body:    1.55;
  --ws-lead-loose:   1.7;

  /* ---------- SPACE (8pt rhythm) ---------- */
  --ws-space-1:   4px;
  --ws-space-2:   8px;
  --ws-space-3:   12px;
  --ws-space-4:   16px;
  --ws-space-5:   24px;
  --ws-space-6:   32px;
  --ws-space-7:   48px;
  --ws-space-8:   64px;
  --ws-space-9:   96px;
  --ws-space-10: 128px;
  --ws-space-11: 192px;

  /* ---------- RADIUS ---------- */
  --ws-radius-sm:   4px;
  --ws-radius-md:   8px;
  --ws-radius-lg:   14px;
  --ws-radius-xl:   24px;
  --ws-radius-pill: 999px;

  /* ---------- MOTION ---------- */
  --ws-dur-instant: 120ms;
  --ws-dur-fast:    220ms;
  --ws-dur-base:    420ms;
  --ws-dur-slow:    680ms;
  --ws-dur-bloom:   1400ms;
  --ws-dur-curtain: 900ms;

  --ws-ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);   /* The signature ease */
  --ws-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ws-ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ws-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- LAYOUT ---------- */
  --ws-max-w:        1320px;
  --ws-max-w-prose:  68ch;
  --ws-gutter:       clamp(20px, 4vw, 48px);
  --ws-rail:         96px;     /* Side rail in desktop chrome */
}

/* ---------- SCHEME UTILITIES ---------- */

.ws-on-dark  { background: var(--ws-bg);    color: var(--ws-ink); }
.ws-on-paper { background: var(--ws-paper); color: var(--ws-ink-dark); }

.ws-mono     { font-family: var(--ws-font-mono);    letter-spacing: var(--ws-track-wide);  text-transform: uppercase; font-size: var(--ws-text-xs); }
.ws-serif-it { font-family: var(--ws-font-serif);   font-style: italic; font-weight: 400; }
.ws-display  { font-family: var(--ws-font-display); font-weight: var(--ws-weight-medium); letter-spacing: var(--ws-track-tight); line-height: var(--ws-lead-display); }
.ws-ember    { background: var(--ws-ember-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- ACCESSIBILITY ---------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --ws-dur-instant: 0ms;
    --ws-dur-fast:    0ms;
    --ws-dur-base:    0ms;
    --ws-dur-slow:    0ms;
    --ws-dur-bloom:   0ms;
    --ws-dur-curtain: 0ms;
  }
}