/**
 * Wildheart Design System 2.0 — Design Tokens
 * One language for Website · App · HQ · Teacher · Mail · AI · CRM
 * Do not duplicate these values in product CSS — reference the tokens.
 */

:root {
  /* ── Colour · Brand ───────────────────────────────────────── */
  --wh-color-copper: #c57a43;
  --wh-color-copper-light: #d4925a;
  --wh-color-copper-dark: #a8642f;
  --wh-color-chocolate: #2c1d17;
  --wh-color-espresso: #2c1d17;
  --wh-color-cream: #f8f4ed;
  --wh-color-cream-white: #fffdf9;
  --wh-color-linen: #fffdf9;
  --wh-color-warm-tan: #e8d4c1;
  --wh-color-muted-beige: #f5eee7;

  /* ── Colour · Ink ─────────────────────────────────────────── */
  --wh-color-ink: #2c1d17;
  --wh-color-ink-secondary: #766456;
  --wh-color-ink-muted: #a89b90;
  --wh-color-ink-inverse: #fffdf9;

  /* ── Colour · Semantic ────────────────────────────────────── */
  --wh-color-success: #5b8c62;
  --wh-color-success-soft: rgba(91, 140, 98, 0.14);
  --wh-color-warning: #c28b34;
  --wh-color-warning-soft: rgba(194, 139, 52, 0.16);
  --wh-color-danger: #b8574d;
  --wh-color-danger-soft: rgba(184, 87, 77, 0.12);
  --wh-color-info: #6a8a9e;
  --wh-color-info-soft: rgba(106, 138, 158, 0.14);

  /* ── Colour · Surfaces ────────────────────────────────────── */
  --wh-bg: var(--wh-color-cream);
  --wh-bg-elevated: var(--wh-color-cream-white);
  --wh-bg-muted: var(--wh-color-muted-beige);
  --wh-bg-inverse: var(--wh-color-chocolate);
  --wh-border: rgba(90, 58, 39, 0.12);
  --wh-border-strong: rgba(90, 58, 39, 0.2);

  /* Primary / secondary aliases (Phase 22 vocabulary) */
  --wh-primary: var(--wh-color-copper);
  --wh-secondary: var(--wh-color-chocolate);

  /* Dark mode reserved */
  --wh-theme: light;

  /* ── Typography · Families ────────────────────────────────── */
  --wh-font-display: 'Oswald', sans-serif;
  --wh-font-serif: 'Libre Baskerville', Georgia, serif;
  --wh-font-script: 'Dancing Script', cursive;
  --wh-font-body: 'Montserrat', sans-serif;

  /* ── Typography · Scale ───────────────────────────────────── */
  --wh-text-display: clamp(2rem, 4vw, 2.75rem);
  --wh-text-page: clamp(1.55rem, 2.5vw, 1.9rem);
  --wh-text-section: 1.15rem;
  --wh-text-card: 1.05rem;
  --wh-text-body: 0.95rem;
  --wh-text-small: 0.85rem;
  --wh-text-caption: 0.72rem;
  --wh-text-button: 0.75rem;

  --wh-leading-tight: 1.15;
  --wh-leading-snug: 1.35;
  --wh-leading-body: 1.55;
  --wh-tracking-display: 0.02em;
  --wh-tracking-section: 0.06em;
  --wh-tracking-button: 0.12em;
  --wh-tracking-caption: 0.1em;

  /* ── Spacing ──────────────────────────────────────────────── */
  --wh-space-1: 0.25rem;
  --wh-space-2: 0.5rem;
  --wh-space-3: 0.75rem;
  --wh-space-4: 1rem;
  --wh-space-5: 1.25rem;
  --wh-space-6: 1.5rem;
  --wh-space-8: 2rem;
  --wh-space-10: 2.5rem;
  --wh-space-12: 3rem;
  --wh-gap: 0.85rem;
  --wh-section-gap: 1.5rem;
  --wh-content-width: 72rem;
  --wh-touch: 44px;
  --wh-touch-lg: 48px;

  /* ── Radius ───────────────────────────────────────────────── */
  --wh-radius-sm: 10px;
  --wh-radius-md: 12px;
  --wh-radius-lg: 16px;
  --wh-radius-card: 20px;
  --wh-radius-xl: 24px;
  --wh-radius-pill: 999px;

  /* ── Elevation ────────────────────────────────────────────── */
  --wh-shadow-soft: 0 8px 28px rgba(44, 29, 23, 0.07);
  --wh-shadow-card: 0 14px 40px rgba(44, 29, 23, 0.08), 0 4px 12px rgba(44, 29, 23, 0.04);
  --wh-shadow-lift: 0 12px 28px rgba(197, 122, 67, 0.28);
  --wh-shadow-lift-soft: 0 16px 36px rgba(44, 29, 23, 0.1), 0 4px 12px rgba(197, 122, 67, 0.12);
  --wh-shadow-drawer: -18px 0 48px rgba(44, 29, 23, 0.14);

  /* ── Motion ───────────────────────────────────────────────── */
  --wh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wh-duration-fast: 150ms;
  --wh-duration: 180ms;
  --wh-duration-slow: 220ms;
  --wh-transition: var(--wh-duration) var(--wh-ease);
  --wh-transition-fast: var(--wh-duration-fast) var(--wh-ease);

  /* ── Z-index ──────────────────────────────────────────────── */
  --wh-z-nav: 40;
  --wh-z-dropdown: 50;
  --wh-z-drawer: 60;
  --wh-z-modal: 70;
  --wh-z-toast: 90;
  --wh-z-ai: 80;

  /* ── Legacy aliases (HQ / App / Teacher compatibility) ─────── */
  --bg-cream: var(--wh-color-cream);
  --bg-card: var(--wh-color-cream-white);
  --bg-linen: var(--wh-color-linen);
  --bg-chocolate: var(--wh-color-chocolate);
  --bg-espresso: var(--wh-color-espresso);
  --ink: var(--wh-color-ink);
  --ink-secondary: var(--wh-color-ink-secondary);
  --ink-muted: var(--wh-color-ink-muted);
  --ink-light: var(--wh-color-ink-secondary);
  --copper: var(--wh-color-copper);
  --copper-light: var(--wh-color-copper-light);
  --rust: var(--wh-color-copper);
  --rust-dark: var(--wh-color-copper-dark);
  --warm-tan: var(--wh-color-warm-tan);
  --muted-beige: var(--wh-color-muted-beige);
  --cream: var(--wh-color-cream);
  --cream-white: var(--wh-color-cream-white);
  --success: var(--wh-color-success);
  --warning: var(--wh-color-warning);
  --error: var(--wh-color-danger);
  --border: var(--wh-border);
  --radius: var(--wh-radius-card);
  --radius-sm: var(--wh-radius-md);
  --radius-card: var(--wh-radius-card);
  --radius-btn: var(--wh-radius-md);
  --radius-pill: var(--wh-radius-pill);
  --shadow: var(--wh-shadow-card);
  --shadow-card: var(--wh-shadow-card);
  --shadow-soft: var(--wh-shadow-soft);
  --shadow-lift: var(--wh-shadow-lift);
  --shadow-lift-soft: var(--wh-shadow-lift-soft);
  --font-display: var(--wh-font-display);
  --font-serif: var(--wh-font-serif);
  --font-script: var(--wh-font-script);
  --font-body: var(--wh-font-body);
  --transition: var(--wh-transition);
  --transition-fast: var(--wh-transition-fast);
  --hq-motion: var(--wh-transition);
  --hq-content-width: var(--wh-content-width);
  --hq-gap: var(--wh-gap);
  --hq-section-gap: var(--wh-section-gap);
}