/* ============================================================
   BEGRACE SPECIAL — Colour & Type Foundations
   by Asitom 1 Enterprise · Accra, Ghana
   British English · Currency: GHS
   ------------------------------------------------------------
   Load order: import fonts (Google Fonts CDN), then this file.
   Fonts are referenced from Google Fonts CDN for preview.
   For production, self-host the woff2 files in /fonts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================
     BRIGHT PALETTE (v2) — saturated, joyful, appetising.
     Energy comes from colour blocking, not from a beige canvas.
     ============================================================ */

  /* Tangerine — PRIMARY. Punchy, mouth-watering, high-energy.
     Carry DARK (ink) text on tangerine blocks; use -700 if white text is needed. */
  --tang-50:  #FFF1E2;
  --tang-100: #FFDFC1;
  --tang-400: #FF9D3D;
  --tang-500: #FF7A1A;   /* signature tangerine */
  --tang-600: #F2600A;   /* deeper — interactive accents */
  --tang-700: #C44A00;   /* tangerine text/button with white text (AA) */

  /* Sunshine / Marigold — warm secondary block colour. DARK text on top. */
  --gold-50:  #FFF6DF;
  --gold-100: #FFEBB3;
  --gold-300: #FFD96B;
  --gold-400: #FFC93C;
  --gold-500: #FFB300;   /* marigold */
  --gold-600: #F59A00;
  --gold-700: #B86C00;   /* gold text on white passes AA */

  /* Lemon Green — fresh accent (owner favourite). Bright yellow-green. */
  --green-50:  #F0FADA;
  --green-100: #DCF1A9;
  --green-400: #A6D930;
  --green-500: #84C111;   /* lemon-green */
  --green-600: #6BA00A;   /* UI / large text */
  --green-700: #4F7A00;   /* lemon-green text on white passes AA */

  /* Red — the bright POP (also the product-label red). */
  --red-50:  #FFE9E4;
  --red-100: #FFCABF;
  --red-200: #FFA395;
  --red-400: #F5573B;
  --red-500: #F23A1E;   /* vivid pop */
  --red-600: #D62411;   /* buttons / text on white — AA with #fff */
  --red-700: #AE1A0C;   /* deep red */

  /* Wine — owner favourite. Deep berry for dark colour-blocks, footer, headings. */
  --wine-50:  #F8E7EE;
  --wine:     #7A1B38;
  --wine-700: #5E1029;

  /* WhatsApp green — the single ordering action colour. */
  --wa:      #1FA855;
  --wa-dark: #128C44;   /* button with white text passes AA */
  --wa-50:   #E4F6EC;

  /* ---------- NEUTRALS (crisp, not beige) ---------- */
  --white:   #FFFFFF;
  --paper:   #FFFEFB;   /* crisp near-white page background */
  --cream:   #FFF6E9;   /* light warm tint — used sparingly for soft blocks */
  --cream-2: #FFF0DA;
  --sand:    #FBEAD2;   /* light warm panel / muted fill */
  --roast:   #B0764A;   /* groundnut tan (imagery reference) */
  --roast-deep: #7A4E2D;

  --ink:   #2A141B;     /* deep wine-ink — primary text */
  --ink-2: #5E4953;     /* secondary text */
  --ink-3: #8E7A82;     /* muted / captions */
  --line:  #EDE3D6;     /* hairline / border */
  --line-strong: #DCCBB8;

  /* ---------- SEMANTIC ---------- */
  --bg:           var(--paper);
  --bg-elevated:  var(--white);
  --text:         var(--ink);
  --text-muted:   var(--ink-2);
  --text-subtle:  var(--ink-3);
  --border:       var(--line);
  --primary:      var(--tang-600);
  --primary-bright: var(--tang-500);
  --on-primary:   var(--white);
  --secondary:    var(--gold-500);
  --accent:       var(--green-600);

  --focus-ring: 0 0 0 3px rgba(255, 122, 26, .40);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* ---------- TYPE SCALE (semantic) ---------- */
  --display-size: clamp(44px, 6vw, 72px);
  --display-line: 1.02;
  --display-weight: 800;
  --display-tracking: -0.025em;

  --h1-size: clamp(34px, 4.4vw, 48px);
  --h1-line: 1.06;
  --h1-weight: 800;
  --h1-tracking: -0.02em;

  --h2-size: clamp(26px, 3vw, 34px);
  --h2-line: 1.12;
  --h2-weight: 700;
  --h2-tracking: -0.015em;

  --h3-size: 23px;
  --h3-line: 1.2;
  --h3-weight: 700;
  --h3-tracking: -0.01em;

  --h4-size: 18px;
  --h4-line: 1.3;
  --h4-weight: 600;

  --body-lg-size: 18px;
  --body-lg-line: 1.62;
  --body-size: 16px;
  --body-line: 1.6;
  --small-size: 14px;
  --small-line: 1.5;
  --tiny-size: 12.5px;

  --eyebrow-size: 13px;
  --eyebrow-weight: 700;
  --eyebrow-tracking: 0.16em;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- RADII ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (soft, neutral-tinted) ---------- */
  --shadow-sm: 0 1px 2px rgba(40,20,28,.06), 0 1px 3px rgba(40,20,28,.05);
  --shadow-md: 0 6px 20px -6px rgba(40,20,28,.16), 0 2px 6px rgba(40,20,28,.06);
  --shadow-lg: 0 22px 50px -14px rgba(40,20,28,.22), 0 6px 16px rgba(40,20,28,.08);
  --shadow-gold: 0 12px 30px -10px rgba(255,179,0,.45);
  --shadow-red:  0 14px 30px -10px rgba(242,96,10,.45);
  --shadow-wa:   0 14px 30px -10px rgba(18,140,68,.42);
}

/* ============================================================
   ELEMENT DEFAULTS
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }

h1, .h1 { font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); letter-spacing: var(--h1-tracking); }
h2, .h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); letter-spacing: var(--h2-tracking); }
h3, .h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); letter-spacing: var(--h3-tracking); }
h4, .h4 { font-size: var(--h4-size); line-height: var(--h4-line); font-weight: var(--h4-weight); }

.display {
  font-family: var(--font-display);
  font-size: var(--display-size);
  line-height: var(--display-line);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  color: var(--ink);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--primary);
}

.body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-line); }
.small   { font-size: var(--small-size); line-height: var(--small-line); }

/* Prices in GHS — tabular figures */
.price { font-variant-numeric: tabular-nums; font-weight: 700; }