/* =============================================================
   Whisper-Push — Design tokens v3 · PADDOCK
   Racing green + signal citron. Aston Martin DNA, distilled.
   Two type personalities (editorial / grotesque) share one palette.
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Neue Haas Display'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('../fonts/NeueHaasDisplayLight.woff2') format('woff2');
}
@font-face {
  font-family: 'Neue Haas Display'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/NeueHaasDisplayRoman.woff2') format('woff2');
}
@font-face {
  font-family: 'Neue Haas Display'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/NeueHaasDisplayMedium.woff2') format('woff2');
}
@font-face {
  font-family: 'Neue Haas Display'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/NeueHaasDisplayBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Neue Haas Display'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('../fonts/NeueHaasDisplayBlack.woff2') format('woff2');
}

/* ---------- Shared primitives ---------- */
:root {
  --wp-radius-sm: 8px;
  --wp-radius-md: 14px;
  --wp-radius-lg: 22px;
  --wp-radius-xl: 32px;
  --wp-radius-2xl: 44px;
  --wp-radius-full: 999px;

  --wp-space-1: 4px;
  --wp-space-2: 8px;
  --wp-space-3: 12px;
  --wp-space-4: 16px;
  --wp-space-5: 24px;
  --wp-space-6: 32px;
  --wp-space-7: 48px;
  --wp-space-8: 64px;
  --wp-space-9: 96px;

  --wp-ease: cubic-bezier(.2, .8, .2, 1);
  --wp-dur-fast: 120ms;
  --wp-dur: 200ms;
  --wp-dur-slow: 360ms;
}

/* =============================================================
   PADDOCK · core palette
   Used by .ds-paddock — and also by .ds-ember / .ds-volt
   so the existing artboards inherit without renaming.
   ============================================================= */
.ds-ember,
.ds-volt,
.ds-paddock {
  /* Surfaces — racing green family. No black anywhere. */
  --bg: #0D2E25;          /* British racing green */
  --bg-elev: #163E33;     /* paddock shadow */
  --bg-elev-2: #1F5043;   /* hood gleam */
  --bg-inverse: #EFEAD8;  /* chamois cream */
  --bg-inverse-2: #E2DBC2;

  /* Foreground (on green) */
  --fg: #EFEAD8;          /* chamois cream — never pure white */
  --fg-muted: #8FA398;    /* sage haze */
  --fg-faint: #4F6660;    /* deep haze */
  --fg-inverse: #0D2E25;

  /* Borders */
  --border: rgba(239, 234, 216, 0.10);
  --border-strong: rgba(239, 234, 216, 0.22);
  --border-inverse: rgba(13, 46, 37, 0.10);
  --border-inverse-strong: rgba(13, 46, 37, 0.22);

  /* Brand — signal citron */
  --accent: #CEDC00;          /* signal citron */
  --accent-soft: #E2EC55;     /* warm citron glow */
  --accent-deep: #A4AF00;     /* olive deep */
  --accent-on: #0D2E25;       /* foreground on accent */
  --accent-tint: rgba(206, 220, 0, 0.14);
  --accent-glow: rgba(206, 220, 0, 0.40);

  /* Secondary — soft chamois variants (no second hue, keeps things tight) */
  --secondary: #E2DBC2;
  --secondary-soft: #EFEAD8;
  --secondary-tint: rgba(239, 234, 216, 0.10);

  /* Semantic */
  --positive: #CEDC00;
  --warning: #F5C84B;
  --danger:   #E0563C;

  /* Type — overridden per .ds-ember vs .ds-volt for personality */
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-display-style: italic;
  --font-display-weight: 400;
  --font-sans: 'Neue Haas Display', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --tracking-display: -0.025em;
  --tracking-tight: -0.015em;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 18, 12, .35);
  --shadow-md: 0 8px 24px rgba(0, 18, 12, .45), 0 0 0 1px rgba(239,234,216,.06);
  --shadow-lg: 0 24px 60px rgba(0, 18, 12, .55), 0 0 0 1px rgba(239,234,216,.06);
  --shadow-glow: 0 0 0 1px rgba(206,220,0,.5), 0 12px 40px rgba(206,220,0,.45);
}

/* Type personality — Grotesque (was .ds-volt) */
.ds-volt {
  --font-display: 'Bricolage Grotesque', 'Neue Haas Display', system-ui, sans-serif;
  --font-display-style: normal;
  --font-display-weight: 700;
  --tracking-display: -0.04em;
}

/* PADDOCK · paper mode (inverse) — chamois background, racing green ink */
.ds-ember.theme-light,
.ds-volt.theme-light,
.ds-paddock.theme-light {
  --bg: #EFEAD8;
  --bg-elev: #E2DBC2;
  --bg-elev-2: #D2CAA8;
  --bg-inverse: #0D2E25;
  --bg-inverse-2: #163E33;
  --fg: #0D2E25;
  --fg-muted: #4F6660;
  --fg-faint: #8FA398;
  --fg-inverse: #EFEAD8;
  --border: rgba(13, 46, 37, 0.10);
  --border-strong: rgba(13, 46, 37, 0.22);
  --accent-on: #0D2E25;
  --shadow-sm: 0 1px 2px rgba(13, 46, 37, .08);
  --shadow-md: 0 8px 24px rgba(13, 46, 37, .14), 0 0 0 1px rgba(13,46,37,.05);
  --shadow-lg: 0 24px 60px rgba(13, 46, 37, .20), 0 0 0 1px rgba(13,46,37,.05);
}

/* =============================================================
   Shared primitives that consume tokens
   ============================================================= */
.wp-surface {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-tight);
}

.wp-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wp-eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--accent);
}

.wp-display {
  font-family: var(--font-display);
  font-style: var(--font-display-style);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--tracking-display);
  line-height: 0.95;
}

.wp-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'ss01';
}

.wp-grid-bg {
  background-image: radial-gradient(circle at 1px 1px, var(--border-strong) 1px, transparent 0);
  background-size: 24px 24px;
}

.wp-surface *::-webkit-scrollbar { display: none; }
.wp-surface * { scrollbar-width: none; }