// ─── Design tokens ───────────────────────────────────────────────────────────

:root {
  // Typography
  --font-family: 'Nunito Variable', 'Nunito', sans-serif;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  28px;

  // Spacing
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  // Radius
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  // Motion
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  // Touch target minimum
  --touch-min: 44px;

  // Bottom nav clearance — 64px row + iOS home-indicator inset (zero on devices without one)
  --bottom-nav-height: calc(64px + env(safe-area-inset-bottom));
}

// ─── Themes ──────────────────────────────────────────────────────────────────

[data-theme="warm-craft"],
:root {
  --color-bg:          #fdf6ee;
  --color-surface:     #fff9f2;
  --color-surface-2:   #f5ead8;
  --color-border:      #e8d9c4;
  --color-text:        #3a2e22;
  --color-text-muted:  #8a7060;
  --color-primary:     #c97c3a;
  --color-primary-fg:  #ffffff;
  --color-secondary:   #e8d9c4;
  --color-secondary-fg:#3a2e22;
  --color-destructive: #c0392b;
  --color-destructive-fg: #ffffff;
  --color-focus-ring:  #c97c3a;
}

[data-theme="playful-pop"] {
  --color-bg:          #fff0fb;
  --color-surface:     #fff8fe;
  --color-surface-2:   #ffe4f7;
  --color-border:      #f0c8ea;
  --color-text:        #2d0a28;
  --color-text-muted:  #7a4272;
  --color-primary:     #d63aab;
  --color-primary-fg:  #ffffff;
  --color-secondary:   #ffe4f7;
  --color-secondary-fg:#2d0a28;
  --color-destructive: #e03030;
  --color-destructive-fg: #ffffff;
  --color-focus-ring:  #d63aab;
}

[data-theme="sage-cream"] {
  --color-bg:          #f6f8f3;
  --color-surface:     #fafcf7;
  --color-surface-2:   #e4ede0;
  --color-border:      #ccd9c4;
  --color-text:        #1e2b1a;
  --color-text-muted:  #607050;
  --color-primary:     #4e7c3a;
  --color-primary-fg:  #ffffff;
  --color-secondary:   #e4ede0;
  --color-secondary-fg:#1e2b1a;
  --color-destructive: #a83020;
  --color-destructive-fg: #ffffff;
  --color-focus-ring:  #4e7c3a;
}

[data-theme="dusty-mauve"] {
  --color-bg:          #f6f0f4;
  --color-surface:     #fdf8fb;
  --color-surface-2:   #ead8e8;
  --color-border:      #d8c4d4;
  --color-text:        #2a1828;
  --color-text-muted:  #7a5874;
  --color-primary:     #8e4a84;
  --color-primary-fg:  #ffffff;
  --color-secondary:   #ead8e8;
  --color-secondary-fg:#2a1828;
  --color-destructive: #b83030;
  --color-destructive-fg: #ffffff;
  --color-focus-ring:  #8e4a84;
}

[data-theme="ocean-dusk"] {
  --color-bg:          #eef3f8;
  --color-surface:     #f4f8fc;
  --color-surface-2:   #d4e4f0;
  --color-border:      #b8d0e4;
  --color-text:        #0e2030;
  --color-text-muted:  #4a6880;
  --color-primary:     #1a6ea8;
  --color-primary-fg:  #ffffff;
  --color-secondary:   #d4e4f0;
  --color-secondary-fg:#0e2030;
  --color-destructive: #b83020;
  --color-destructive-fg: #ffffff;
  --color-focus-ring:  #1a6ea8;
}

[data-theme="honey-slate"] {
  --color-bg:          #f2f2ee;
  --color-surface:     #f8f8f4;
  --color-surface-2:   #e4e0d4;
  --color-border:      #d0cc bc;
  --color-text:        #1c1c18;
  --color-text-muted:  #6c6858;
  --color-primary:     #c49a20;
  --color-primary-fg:  #1c1c18;
  --color-secondary:   #e4e0d4;
  --color-secondary-fg:#1c1c18;
  --color-destructive: #b03020;
  --color-destructive-fg: #ffffff;
  --color-focus-ring:  #c49a20;
}

// ─── Reset & base ─────────────────────────────────────────────────────────────

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

html {
  font-family: var(--font-family);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
}

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

// ─── Focus visible ────────────────────────────────────────────────────────────

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

// ─── Utility mixins ───────────────────────────────────────────────────────────

@mixin touch-target {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
}

@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
