/**
 * Wovelr Design Tokens — CSS Custom Properties
 * Import this file once at the root of your application.
 *
 * Usage:
 *   @import url('./tokens.css');
 *   .button { background: var(--wv-color-copper); color: var(--wv-color-paper); }
 */

:root {
  /* ─── Brand Colors ──────────────────────────────────── */
  --wv-color-ink:        #0B1220;
  --wv-color-ink-2:      #1E2A44;
  --wv-color-paper:      #FAFAF7;
  --wv-color-linen:      #F2EFE8;
  --wv-color-copper:     #C8643C;
  --wv-color-copper-soft:#E89976;
  --wv-color-signal:     #2E5BFF;

  /* ─── Neutrals ──────────────────────────────────────── */
  --wv-color-line:       #D9D6CD;
  --wv-color-muted:      #6B7280;
  --wv-color-muted-2:    #9CA3AF;

  /* ─── Semantic — Light theme ────────────────────────── */
  --wv-bg:               var(--wv-color-paper);
  --wv-bg-subtle:        var(--wv-color-linen);
  --wv-fg:               var(--wv-color-ink);
  --wv-fg-muted:         var(--wv-color-muted);
  --wv-border:           var(--wv-color-line);
  --wv-accent:           var(--wv-color-copper);
  --wv-accent-fg:        var(--wv-color-paper);
  --wv-link:             var(--wv-color-signal);

  /* Aliases used by inline-style JS renderers in shell.js (auth, BO
     sub-tabs, …). Kept distinct so we can later diverge them. */
  --wv-stroke:           var(--wv-border);
  --wv-bg-card:          var(--wv-bg);
  --wv-bg-soft:          var(--wv-bg-subtle);

  /* ─── Typography ────────────────────────────────────── */
  --wv-font-display:     'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wv-font-body:        'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wv-font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --wv-fw-light:         300;
  --wv-fw-medium:        500;
  --wv-fw-bold:          700;
  --wv-fw-extrabold:     800;

  --wv-fs-xs:            12px;
  --wv-fs-sm:            14px;
  --wv-fs-base:          16px;
  --wv-fs-lg:            18px;
  --wv-fs-xl:            22px;
  --wv-fs-2xl:           28px;
  --wv-fs-3xl:           36px;
  --wv-fs-4xl:           48px;
  --wv-fs-5xl:           64px;

  --wv-lh-tight:         1.05;
  --wv-lh-snug:          1.25;
  --wv-lh-normal:        1.5;
  --wv-lh-relaxed:       1.65;

  --wv-tracking-tight:   -0.03em;
  --wv-tracking-snug:    -0.015em;
  --wv-tracking-normal:  0em;
  --wv-tracking-wide:    0.05em;
  --wv-tracking-widest:  0.2em;

  /* ─── Spacing (4px base) ────────────────────────────── */
  --wv-space-1:          4px;
  --wv-space-2:          8px;
  --wv-space-3:          12px;
  --wv-space-4:          16px;
  --wv-space-5:          20px;
  --wv-space-6:          24px;
  --wv-space-8:          32px;
  --wv-space-10:         40px;
  --wv-space-12:         48px;
  --wv-space-16:         64px;
  --wv-space-20:         80px;
  --wv-space-24:         96px;

  /* ─── Radii ─────────────────────────────────────────── */
  --wv-radius-none:      0;
  --wv-radius-sm:        2px;
  --wv-radius-base:      4px;
  --wv-radius-md:        6px;
  --wv-radius-lg:        12px;
  --wv-radius-full:      9999px;

  /* ─── Shadows ───────────────────────────────────────── */
  --wv-shadow-sm:        0 1px 2px rgba(11, 18, 32, 0.06);
  --wv-shadow-base:      0 2px 6px rgba(11, 18, 32, 0.08);
  --wv-shadow-md:        0 6px 16px rgba(11, 18, 32, 0.10);
  --wv-shadow-lg:        0 16px 40px rgba(11, 18, 32, 0.12);

  /* ─── Motion ────────────────────────────────────────── */
  --wv-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --wv-ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --wv-duration-fast:    150ms;
  --wv-duration-base:    220ms;
  --wv-duration-slow:    400ms;
}

/* ─── Dark theme override ─────────────────────────────── */
:root[data-theme="dark"],
.dark {
  --wv-bg:               var(--wv-color-ink);
  --wv-bg-subtle:        var(--wv-color-ink-2);
  --wv-fg:               var(--wv-color-paper);
  --wv-fg-muted:         var(--wv-color-muted-2);
  --wv-border:           rgba(255, 255, 255, 0.10);
  --wv-accent:           var(--wv-color-copper-soft);
  --wv-accent-fg:        var(--wv-color-ink);
  --wv-link:             #6B89FF;
}

/* ─── Base reset (optional, conservative) ──────────────── */
body {
  font-family: var(--wv-font-body);
  background: var(--wv-bg);
  color: var(--wv-fg);
  font-size: var(--wv-fs-base);
  line-height: var(--wv-lh-normal);
  -webkit-font-smoothing: antialiased;
}