/* ---------------------------
   Design Tokens — Berry Finds
   "Market Fresh" aesthetic
   Warm, inviting, Etsy-inspired
   Light-first, strawberry red accent
---------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400&family=Nunito:wght@300;400;500;600;700&display=swap');

:root {
  /* Layout */
  --w: 1200px;
  --w-narrow: 720px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-pill: 100px;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro: 150ms;
  --t-ui: 250ms;
  --t-modal: 350ms;
  --t: 150ms var(--ease);

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Topbar */
  --topbar-h: 64px;
}

/* ─── Light theme (DEFAULT) ─── */
html,
html[data-theme="light"] {
  --bg: #FFF8F0;
  --surface: #FFFFFF;
  --surface-2: #FFF1E6;
  --surface-3: #FFE8D6;

  --text: #2D2019;
  --text-heading: #1A0F08;
  --muted: #8C7A6B;
  --muted-2: #B8A99A;

  --border: #F0E0D0;
  --border-subtle: rgba(0, 0, 0, 0.05);
  --shadow: 0 8px 32px rgba(45, 32, 25, 0.08);
  --shadow-sm: 0 2px 8px rgba(45, 32, 25, 0.06);
  --shadow-hover: 0 12px 40px rgba(45, 32, 25, 0.12);

  /* Strawberry red accent */
  --accent: #E63946;
  --accent-hover: #D62839;
  --accent-subtle: rgba(230, 57, 70, 0.08);
  --accent-text: #C1121F;

  /* Sage green secondary */
  --secondary: #6B9080;
  --secondary-hover: #5A7D6E;
  --secondary-subtle: rgba(107, 144, 128, 0.10);

  /* Berry dark */
  --berry: #3D0C11;

  --chip: rgba(45, 32, 25, 0.04);
  --chip-hover: rgba(45, 32, 25, 0.08);
  --chip-active: rgba(230, 57, 70, 0.10);

  --topbar: rgba(255, 248, 240, 0.90);
  --overlay: rgba(61, 12, 17, 0.30);

  /* Deal badges */
  --badge-discount: #E63946;
  --badge-savings: #6B9080;
  --badge-deal: #E76F51;
  --badge-warehouse: #F4A261;

  color-scheme: light;
}

/* ─── Dark theme ─── */
html[data-theme="dark"] {
  --bg: #1A0F08;
  --surface: #241710;
  --surface-2: #2E1F16;
  --surface-3: #3A2920;

  --text: #F5EDE6;
  --text-heading: #FFF8F0;
  --muted: #A08E7E;
  --muted-2: #6B5C4F;

  --border: #3A2920;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5);

  --accent: #FF6B6B;
  --accent-hover: #FF8585;
  --accent-subtle: rgba(255, 107, 107, 0.12);
  --accent-text: #FF9B9B;

  --secondary: #88B9A3;
  --secondary-hover: #9ECAB5;
  --secondary-subtle: rgba(136, 185, 163, 0.12);

  --berry: #FFE0E0;

  --chip: rgba(255, 255, 255, 0.06);
  --chip-hover: rgba(255, 255, 255, 0.10);
  --chip-active: rgba(255, 107, 107, 0.15);

  --topbar: rgba(26, 15, 8, 0.90);
  --overlay: rgba(0, 0, 0, 0.50);

  --badge-discount: #FF6B6B;
  --badge-savings: #88B9A3;
  --badge-deal: #F4A261;
  --badge-warehouse: #E9C46A;

  color-scheme: dark;
}