/* ============================================================
   Spine Goals — shared design tokens & base styles
   Included by: index.html, login, forgot, terms, privacy, cookie
   ============================================================ */

/* ── Self-hosted fonts ────────────────────────────────────── */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/BricolageGrotesque[opsz,wght].woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Light mode tokens (default) ──────────────────────────── */
:root {
  --bg:        #ffffff;
  --bg2:       #f5f4f0;
  --bg3:       #efede8;
  --border1:   rgba(0,0,0,0.08);
  --border2:   rgba(0,0,0,0.15);
  --border3:   rgba(0,0,0,0.25);
  --text1:     #1a1a18;
  --text2:     #5a5a56;
  --text3:     #9a9892;
  --radius-md: 8px;
  --radius-lg: 12px;
  --font:      -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --logo-fill: #484848;
  --accent:    #1D9E75;
}

/* ── System dark mode ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --logo-fill: #EFEDE7;
    --bg:      #1c1c1a;
    --bg2:     #262624;
    --bg3:     #2e2e2b;
    --border1: rgba(255,255,255,0.07);
    --border2: rgba(255,255,255,0.13);
    --border3: rgba(255,255,255,0.22);
    --text1:   #e8e6df;
    --text2:   #9a9890;
    --text3:   #5e5d58;
  }
}

/* ── Force dark ───────────────────────────────────────────── */
:root[data-theme="dark"] {
  --logo-fill: #EFEDE7;
  --bg:      #1c1c1a;
  --bg2:     #262624;
  --bg3:     #2e2e2b;
  --border1: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);
  --border3: rgba(255,255,255,0.22);
  --text1:   #e8e6df;
  --text2:   #9a9890;
  --text3:   #5e5d58;
}

/* ── Force light ──────────────────────────────────────────── */
:root[data-theme="light"] {
  --logo-fill: #484848;
  --bg:        #ffffff;
  --bg2:       #f5f4f0;
  --bg3:       #efede8;
  --border1:   rgba(0,0,0,0.08);
  --border2:   rgba(0,0,0,0.15);
  --border3:   rgba(0,0,0,0.25);
  --text1:     #1a1a18;
  --text2:     #5a5a56;
  --text3:     #9a9892;
}

/* ── Body base ────────────────────────────────────────────── */
body {
  font-family: var(--font);
  background: var(--bg3);
  color: var(--text1);
  min-height: 100vh;
}