/* ============================================================
   PulseForm — Design Tokens (NewDesign2)
   Drop-in replacement. Imports first.
   Themes: moss (default) · slate · paper · night
   Legacy --pf-* aliases preserved for back-compat.
   ============================================================ */

:root,
:root[data-theme="moss"] {
  /* === SURFACES =========================================== */
  --bg:        #F6F5F1;
  --surface:   #FFFFFF;
  --surface-2: #F2F1ED;
  --line:      #E8E6DF;
  --line-2:    #DEDBD2;

  /* === TEXT =============================================== */
  --ink:   #14160F;
  --ink-2: #45483D;
  --ink-3: #80836F;
  --ink-4: #B5B6AB;

  /* === ACCENT (single hue) ================================ */
  --accent:        oklch(0.52 0.10 150);
  --accent-ink:    oklch(0.32 0.08 150);
  --accent-tint:   oklch(0.96 0.04 150);
  --accent-tint-2: oklch(0.92 0.06 150);

  /* === STATUS ============================================= */
  --ok:          oklch(0.62 0.13 150);
  --ok-tint:     oklch(0.96 0.04 150);
  --warn:        oklch(0.72 0.13 75);
  --warn-tint:   oklch(0.96 0.04 75);
  --danger:      oklch(0.58 0.18 25);
  --danger-tint: oklch(0.96 0.04 25);
  --info:        oklch(0.55 0.13 240);
  --info-tint:   oklch(0.96 0.04 240);

  /* === ELEVATION ========================================== */
  --shadow-xs: 0 1px 0 rgba(20,22,15,.04);
  --shadow-sm: 0 1px 0 rgba(20,22,15,.04), 0 1px 2px rgba(20,22,15,.04);
  --shadow-md: 0 1px 0 rgba(20,22,15,.04), 0 4px 14px -6px rgba(20,22,15,.10);
  --shadow-lg: 0 1px 0 rgba(20,22,15,.04), 0 12px 32px -10px rgba(20,22,15,.18);

  /* === RADIUS ============================================= */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* === SPACING ============================================ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* === TYPE =============================================== */
  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular,
               Menlo, monospace;
  --font-display: var(--font-sans);
  --font-serif: var(--font-sans);

  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;
  --fs-5xl: 56px;

  /* === MOTION ============================================= */
  --ease-out:    cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --ease-in:     cubic-bezier(.7,0,.84,0);
  --d-fast: 120ms;
  --d-base: 180ms;
  --d-slow: 280ms;

  /* === LAYOUT ============================================= */
  --sidebar-w: 256px;
  --topbar-h:  72px;
  --content-max: 1480px;
  --content-pad: 32px;

  /* === FOCUS RING ========================================= */
  --ring: 0 0 0 3px color-mix(in oklch, var(--accent) 30%, transparent);

  /* === LEGACY --pf-* ALIASES (back-compat) ================ */
  --pf-violet:        var(--accent);
  --pf-violet-hover:  var(--accent);
  --pf-violet-deep:   var(--accent-ink);
  --pf-magenta:       var(--danger);
  --pf-cyan:          var(--info);
  --pf-neon:          var(--ok);
  --pf-amber:         var(--warn);

  --pf-ink:           var(--ink);
  --pf-ink-2:         var(--ink-2);
  --pf-muted:         var(--ink-3);
  --pf-muted-2:       var(--ink-4);

  --pf-bg:            var(--bg);
  --pf-bg-2:          var(--surface-2);
  --pf-surface:       var(--surface);
  --pf-surface-glass: var(--surface);
  --pf-surface-dark:  var(--ink);
  --pf-surface-cream: var(--accent-tint);

  --pf-line:          var(--line);
  --pf-line-2:        var(--line-2);
  --pf-line-strong:   var(--line-2);

  /* gradients neutralized — design system says no decorative gradients */
  --pf-grad:        var(--ink);
  --pf-grad-bright: var(--ink);
  --pf-grad-soft:   var(--accent-tint);
  --pf-grad-warm:   var(--ink);

  --pf-glow-violet:  none;
  --pf-glow-magenta: none;
  --pf-glow-cyan:    none;
  --pf-glow-ink:     none;

  --pf-shadow-sm:  var(--shadow-sm);
  --pf-shadow-md:  var(--shadow-md);
  --pf-shadow-lg:  var(--shadow-lg);
  --pf-shadow-xl:  var(--shadow-lg);

  --pf-r-xs: var(--r-xs);
  --pf-r-sm: var(--r-sm);
  --pf-r-md: var(--r-md);
  --pf-r-lg: var(--r-lg);
  --pf-r-xl: var(--r-xl);
  --pf-r-pill: var(--r-pill);

  --pf-s-1: var(--s-1);
  --pf-s-2: var(--s-2);
  --pf-s-3: var(--s-3);
  --pf-s-4: var(--s-4);
  --pf-s-5: var(--s-5);
  --pf-s-6: var(--s-6);
  --pf-s-7: var(--s-8);
  --pf-s-8: var(--s-12);
  --pf-s-9: var(--s-16);

  --pf-font-sans: var(--font-sans);
  --pf-font-mono: var(--font-mono);

  --pf-fs-display: var(--fs-5xl);
  --pf-fs-h1:      var(--fs-4xl);
  --pf-fs-h2:      var(--fs-3xl);
  --pf-fs-h3:      var(--fs-xl);
  --pf-fs-h4:      var(--fs-lg);
  --pf-fs-body:    var(--fs-base);
  --pf-fs-small:   var(--fs-sm);
  --pf-fs-tiny:    var(--fs-xs);

  --pf-tracking-tight:    -0.01em;
  --pf-tracking-display:  -0.025em;
  --pf-tracking-wide:      0.14em;

  --pf-ease-out:  var(--ease-out);
  --pf-ease-in:   var(--ease-in);
  --pf-ease-emph: var(--ease-out);
  --pf-d-fast: var(--d-fast);
  --pf-d-base: var(--d-base);
  --pf-d-slow: var(--d-slow);

  --pf-z-base:    1;
  --pf-z-sticky:  10;
  --pf-z-overlay: 100;
  --pf-z-modal:   200;
  --pf-z-toast:   300;
}

/* SLATE — cool indigo */
:root[data-theme="slate"] {
  --bg:        #F6F7F9;
  --surface:   #FFFFFF;
  --surface-2: #F1F3F6;
  --line:      #E4E7EC;
  --line-2:    #D5D9E0;
  --ink:   #0E1116;
  --ink-2: #3D4350;
  --ink-3: #6B7385;
  --ink-4: #ACB2C0;
  --accent:        oklch(0.52 0.16 255);
  --accent-ink:    oklch(0.32 0.14 255);
  --accent-tint:   oklch(0.96 0.03 255);
  --accent-tint-2: oklch(0.92 0.05 255);
}

/* PAPER — neutral graphite */
:root[data-theme="paper"] {
  --bg:        #FAFAFA;
  --surface:   #FFFFFF;
  --surface-2: #F4F4F4;
  --line:      #E7E7E7;
  --line-2:    #D6D6D6;
  --ink:   #0A0A0A;
  --ink-2: #404040;
  --ink-3: #737373;
  --ink-4: #A3A3A3;
  --accent:        oklch(0.45 0.02 250);
  --accent-ink:    oklch(0.25 0.02 250);
  --accent-tint:   oklch(0.96 0.005 250);
  --accent-tint-2: oklch(0.92 0.01 250);
}

/* NIGHT — dark mode */
:root[data-theme="night"] {
  --bg:        #0E110F;
  --surface:   #161A17;
  --surface-2: #1E231F;
  --line:      #262B26;
  --line-2:    #313731;
  --ink:   #ECEEE7;
  --ink-2: #B6BAB1;
  --ink-3: #7E8378;
  --ink-4: #555A52;
  --accent:        oklch(0.72 0.14 150);
  --accent-ink:    oklch(0.85 0.12 150);
  --accent-tint:   oklch(0.28 0.05 150);
  --accent-tint-2: oklch(0.35 0.08 150);
  --ok-tint:       oklch(0.28 0.05 150);
  --warn-tint:     oklch(0.30 0.06 75);
  --danger-tint:   oklch(0.30 0.07 25);
  --info-tint:     oklch(0.30 0.06 240);
  --shadow-xs: 0 1px 0 rgba(0,0,0,.3);
  --shadow-sm: 0 1px 0 rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 1px 0 rgba(0,0,0,.3), 0 4px 14px -6px rgba(0,0,0,.55);
  --shadow-lg: 0 1px 0 rgba(0,0,0,.3), 0 12px 32px -10px rgba(0,0,0,.7);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:        #0E110F;
    --surface:   #161A17;
    --surface-2: #1E231F;
    --line:      #262B26;
    --line-2:    #313731;
    --ink:   #ECEEE7;
    --ink-2: #B6BAB1;
    --ink-3: #7E8378;
    --ink-4: #555A52;
    --accent:        oklch(0.72 0.14 150);
    --accent-ink:    oklch(0.85 0.12 150);
    --accent-tint:   oklch(0.28 0.05 150);
    --accent-tint-2: oklch(0.35 0.08 150);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}