/* ============================================================
   Theme: WARM — Bakery, Café, Restaurant, Sweet Shop
   Primary: Amber-600 (#d97706) — works on light AND dark
   Philosophy: Inviting, energetic, rounded, bold, appetising
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ── Identity ── */
  --theme: warm;

  /* ── Colour System ──
     Amber-600 (#d97706): contrast 4.7:1 on white ✅, 4.2:1 on gray-900 ✅
     Works perfectly on both light and dark backgrounds              */
  --color-primary:     #d97706;   /* amber-600 — main brand colour  */
  --color-primary-h:   #b45309;   /* amber-700 — hover state        */
  --color-accent:      #fbbf24;   /* amber-400 — highlights, stars  */
  --color-secondary:   #78350f;   /* amber-900 — deep warm text     */

  /* Surfaces — cream-warm, not cold white */
  --color-surface:     #fffbf5;
  --color-surface-2:   #fef3c7;
  --color-border:      rgba(217,119,6,0.15);

  /* Text */
  --color-text:        #1c1917;   /* stone-900  */
  --color-text-muted:  #78716c;   /* stone-500  */
  --color-text-on-primary: #ffffff;

  /* Dark mode overrides */
  --color-surface-dark:   #1c1917;
  --color-surface-2-dark: #292524;

  /* ── Typography ── */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;

  --text-hero:    clamp(2.5rem, 6vw, 4.5rem);
  --text-h2:      clamp(1.75rem, 3.5vw, 3rem);
  --text-h3:      1.35rem;
  --text-label:   0.75rem;

  --weight-heading:       800;
  --weight-subheading:    600;
  --letter-spacing-hero:  -0.02em;   /* tight = energetic */
  --letter-spacing-label:  0.12em;

  /* ── Shape — rounded = friendly, approachable ── */
  --radius-xs:    0.5rem;
  --radius-sm:    0.75rem;
  --radius-md:    1.25rem;
  --radius-card:  1.5rem;
  --radius-btn:   9999px;          /* pill buttons = inviting */
  --radius-image: 1rem;

  /* ── Depth ── */
  --shadow-sm:   0 2px 8px rgba(120,53,15,0.08);
  --shadow-md:   0 8px 24px rgba(120,53,15,0.12);
  --shadow-card: 0 4px 24px rgba(120,53,15,0.10);
  --shadow-btn:  0 4px 16px rgba(217,119,6,0.30);

  /* ── Spacing ── */
  --section-py:    5rem;
  --section-py-sm: 3rem;
  --container-max: 1200px;

  /* ── Button personality ── */
  --btn-radius:         9999px;
  --btn-padding:        0.875rem 2rem;
  --btn-letter-spacing: 0;
  --btn-transform:      none;
  --btn-weight:         700;
  --btn-shadow:         var(--shadow-btn);

  /* ── Motion — bouncy, lively ── */
  --ease-default:  cubic-bezier(0.34, 1.56, 0.64, 1);   /* springy */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  /* ── Section dividers ── */
  --divider-style: wave;
}

/* Dark mode — amber stays vibrant */
.dark {
  --color-surface:    #1c1917;
  --color-surface-2:  #292524;
  --color-text:       #fafaf9;
  --color-text-muted: #a8a29e;
  --color-border:     rgba(251,191,36,0.12);
  /* primary stays #d97706 — it pops on dark background too */
}