/* ═══════════════════════════════════════════
   POKIT — base.css
   Variables · Reset · Typography · Themes
   ═══════════════════════════════════════════ */

:root {
  /* ── Hero Pinks ── */
  --primary: #D4788E;
  --primary-light: #F2B5C4;
  --primary-100: #FFF0F3;
  --primary-200: #FFD6E0;
  --primary-300: #FFB3C6;

  /* ── Warm Accents ── */
  --accent: #D4A84B;
  --accent-light: #F5E6B8;

  /* ── Cozy Neutrals ── */
  --bg: #FFF5F7;
  --bg2: #FFFFFF;
  --card: #FFFFFF;
  --card-border: #F0E0E5;
  --cream: #FFF8F5;
  --linen: #FDF6F0;
  --parchment: #F5EDE3;

  /* ── Wood Tones ── */
  --wood-light: #D4B896;
  --wood-mid: #B8936A;
  --wood-dark: #8B6914;

  /* ── Text ── */
  --text: #2D1F2D;
  --text-muted: #8B7B8B;

  /* ── Status ── */
  --success: #4CAF50;
  --danger: #E53E3E;
  --warning: #F6AD55;

  /* ── Surfaces ── */
  --nav-bg: #FFFFFF;
  --shadow: 0 2px 12px rgba(212,120,142,0.08);
  --shadow-lg: 0 8px 32px rgba(212,120,142,0.15);
  --shadow-cozy: 0 2px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(212,120,142,0.06);

  /* ── Geometry ── */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-cozy: 20px;
  --font: 'Quicksand', sans-serif;
  --font-hand: 'Dancing Script', cursive;
}

[data-theme="ocean"] {
  --primary: #4A90B8;
  --primary-light: #A8D4E6;
  --accent: #F4C95D;
  --bg: #F0F7FA;
  --bg2: #FFFFFF;
  --card-border: #D4E8F0;
  --text: #1A3A4A;
  --text-muted: #6B8A9A;
  --nav-bg: #FFFFFF;
  --shadow: 0 2px 12px rgba(74,144,184,0.08);
}

[data-theme="green"] {
  --primary: #6B9B6B;
  --primary-light: #B5D4B5;
  --accent: #D4A84B;
  --bg: #F2F7F2;
  --bg2: #FFFFFF;
  --card-border: #D4E4D4;
  --text: #1F2D1F;
  --text-muted: #7B8B7B;
  --nav-bg: #FFFFFF;
  --shadow: 0 2px 12px rgba(107,155,107,0.08);
}

[data-theme="dark"] {
  --primary: #E88BA5;
  --primary-light: #4A3040;
  --primary-100: #2D1F28;
  --primary-200: #3D2835;
  --primary-300: #5A3548;
  --accent: #F4C95D;
  --accent-light: #3D3518;
  --bg: #1A1225;
  --bg2: #241832;
  --card: #2D1F3D;
  --card-border: #3D2D4D;
  --cream: #1E1520;
  --linen: #1A1318;
  --parchment: #2A2025;
  --wood-light: #6B5A4A;
  --wood-mid: #4A3A2A;
  --wood-dark: #2A1A0A;
  --text: #F0E8F0;
  --text-muted: #9B8B9B;
  --nav-bg: #241832;
  --shadow: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-cozy: 0 2px 8px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.15);
}

/* ── Reset ── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html { font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Subtle floral wallpaper pattern */
  background-image:
    radial-gradient(circle at 20% 35%, var(--primary-200) 0.5px, transparent 0.5px),
    radial-gradient(circle at 80% 65%, var(--primary-200) 0.5px, transparent 0.5px);
  background-size: 30px 30px;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 20% 35%, rgba(232,139,165,0.04) 0.5px, transparent 0.5px),
    radial-gradient(circle at 80% 65%, rgba(232,139,165,0.04) 0.5px, transparent 0.5px);
  background-size: 30px 30px;
}

/* ── Utility Typography ── */
.handwritten {
  font-family: 'Dancing Script', cursive;
}

@media (max-width: 380px) {
  .stats-grid { gap: 6px; }
  .stat-card { padding: 10px; }
  .stat-value { font-size: 16px; }
}