/* ═══════════════════════════════════════════════════════════════
   WODDI DESIGN SYSTEM — Phase 1 token layer (Build Spec §3)
   Loads AFTER styles.css and re-maps the CSS custom properties the
   whole app already paints with. Remove this file (or load with
   ?classicds=1) and the previous look returns — nothing structural
   below depends on it.
   ═══════════════════════════════════════════════════════════════ */

/* ── Typography: Manrope display / Inter body ── */
:root {
  --ff-display: 'Manrope', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Light palette (spec §3): neutral premium, warm-tan retired ── */
:root {
  --bg:        #F7F7F4;
  --bg2:       #F1F1EC;
  --surface:   #FFFFFF;
  --surface-2: #F7F7F4;
  --surface-3: #EFEFEA;

  --text:      #17171C;
  --text-2:    #45444C;
  --text-3:    #66656E;
  --text-4:    #A3A2AB;
  --border:    #E7E6E1;
  --border-2:  #D9D8D2;

  /* Brand accents unchanged: magenta = action/focus, green = progress/success */
  --gmn:       #D4006A;
  --gmn-hover: #B3005A;
  --gmn-light: #FDEFF6;
  --gmn-mid:   #F2BEDA;
  --nnn:       #7CB518;
  --nnn-hover: #689A12;
  --nnn-light: #F2F9E6;
  --nnn-mid:   #C6E28C;
  --gold:      #A07830;
  --gold-light:#FBF5E9;

  /* Component language (spec §3): radius 14–18 cards / 10–12 controls */
  --r-xs: 0.5rem;     /* 8  */
  --r-sm: 0.75rem;    /* 12 — controls */
  --r:    1rem;       /* 16 — cards */
  --r-lg: 1.125rem;   /* 18 — major cards */
  --r-xl: 1.375rem;   /* 22 — sheets/heros */

  /* Shadows: subtle, short, low-opacity */
  --shadow-xs: 0 1px 2px rgba(20,20,26,0.05);
  --shadow-sm: 0 2px 8px rgba(20,20,26,0.06);
  --shadow:    0 4px 16px rgba(20,20,26,0.07);
  --shadow-lg: 0 10px 32px rgba(20,20,26,0.10);
  --shadow-xl: 0 18px 56px rgba(20,20,26,0.14);
}

/* ── Dark mode: intentional palette, not inverted white (spec §3) ── */
html.dark {
  --bg:        #0B0B10;
  --bg2:       #0F0F15;
  --surface:   #14141C;
  --surface-2: #181822;
  --surface-3: #1B1A25;

  --text:      #F7F7FA;
  --text-2:    #CFCED6;
  --text-3:    #AAA7B2;
  --text-4:    #6E6C78;
  --border:    #23222E;
  --border-2:  #2E2D3A;

  --gmn-light: #2A0A1B;
  --gmn-mid:   #57173A;
  --nnn-light: #16220A;
  --nnn-mid:   #335110;
  --gold-light:#241B0C;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.40);
  --shadow:    0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 10px 32px rgba(0,0,0,0.50);
  --shadow-xl: 0 18px 56px rgba(0,0,0,0.55);
}

/* ── Type scale & rhythm (spec §3): body 15–17px, lh 1.65 ── */
body { font-size: 16px; line-height: 1.65; letter-spacing: -0.006em; }
h1, h2, h3, h4, .dash-section h2 { font-family: var(--ff-display); letter-spacing: -0.02em; }
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }
button { font-family: var(--ff-body); font-weight: 600; }
small, .badge, .level-badge { letter-spacing: 0.01em; }

/* ── Focus visibility (accessibility groundwork, spec §7) ── */
:focus-visible {
  outline: 2px solid var(--gmn);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
html.dark :focus-visible { outline-color: var(--nnn); }

/* ── Cards: 1px low-contrast borders, calm elevation ── */
.card, .qa-card, .more-drawer-item {
  border: 1px solid var(--border);
}

/* ═══════════════ MOBILE SHELL (360px-first) ═══════════════ */

/* Bottom navigation: elevated surface, ≥44px targets, safe-area aware */
.bottom-nav {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding-bottom: max(env(safe-area-inset-bottom), 4px);
  box-shadow: 0 -2px 16px rgba(20,20,26,0.05);
}
.bottom-nav-item {
  min-height: 52px;
  font-size: 0.6875rem;
  font-weight: 600;
  gap: 3px;
  border-radius: var(--r-sm);
  transition: color .16s ease, transform .16s ease;
}
.bottom-nav-item i { font-size: 1.125rem; }
.bottom-nav-item.active { transform: translateY(-1px); }

/* More sheet: proper bottom sheet */
.more-drawer {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border: 1px solid var(--border);
  border-bottom: 0;
  box-shadow: var(--shadow-xl);
  padding-bottom: max(env(safe-area-inset-bottom), 12px);
}
.more-drawer-handle {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--border-2);
}
.more-drawer-item { min-height: 64px; }

/* One dominant primary action per viewport: primary buttons get weight */
.btn-primary, .qa-card.primary, button.cta {
  font-weight: 700;
}

/* Desktop keeps the classic bottom navigation (owner preference, v112).
   On wide screens the bar simply centres its items for balance. */
@media (min-width: 1024px) {
  .bottom-nav { justify-content: center; }
  .bottom-nav-item { max-width: 140px; }
}

/* Reduced motion (spec §7) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}