/* =====================================================================
Hey Halwai - design tokens (Builder A). Colour/type/space tokens ONLY.
---------------------------------------------------------------------
GOOGLE FONTS (put in of every page, Builder B):
Fonts
- Display : Grandstander (italic 600/800) - rounded, bold, casual italic; closest Google
match to the hand-cut pink "Hey Halwai" wordmark. For the real wordmark
always use images/brand/wordmark.png, never retype it.
- Serif : Fraunces - warm soft serif echoing the serif in the round Instagram logo.
- Body : Figtree - friendly geometric sans (not Inter/Roboto/Arial).
Colour sources (sampled, not guessed)
- teal / magenta / marigold / skin / outline: Instagram 3x3 stamp artwork (sRGB), posts DJhKnrXMCv7..DJhJwFxscn4.
(The CMYK print proof converts to #00646B teal / #E42084 pink - same hues, print gamut.)
- gold: foil on supplier "Red & Gold Paisley" box photo, median #D3AB5E; brief value #C9A04A kept.
- brown: from the PLAN (#5A3A22) - the round Instagram logo could NOT be fetched (429/login wall), so brown is NOT sampled.
WCAG contrast (computed, relative luminance method)
- ink #22150F on cream #FFF8EC ......... 16.8:1 (AAA)
- ink on paper #F5E9D3 .................. 14.8:1 (AAA)
- cream on teal #276467 .................. 6.4:1 (AA, large+normal)
- cream on teal-deep #1B4B4E .............. 9.2:1 (AAA)
- white on magenta #D70185 (CTA) .......... 5.0:1 (AA normal text)
- teal-deep on cream ...................... 9.2:1 (AAA) | on paper 8.1:1
- magenta-deep #A8005F on cream ........... 7.0:1 (AAA) -> use for magenta TEXT on cream
- brown #5A3A22 on cream .................. 9.6:1
- ink on marigold #FFBE00 ................. 10.7:1
- marigold on teal-deep ................... 5.8:1
- gold-light #E0BB6D on teal-deep ......... ~5.6:1 ; gold #C9A04A on teal-deep 4.0:1 (large text/rules only)
- !! magenta #D70185 on teal #276467 ...... 1.4:1 FAIL - never put magenta text on teal (art/stamps only)
- magenta (not deep) text on cream ........ 4.7:1 (AA but prefer --magenta-deep for small text)
===================================================================== */
:root {
/* ---- brand palette ---- */
--teal: #276467; /* main brand background (Instagram artwork) */
--teal-deep: #1B4B4E; /* footers, text-on-cream, dark bands */
--teal-ink: #123638; /* deepest teal for overlays */
--teal-print: #00646B; /* print-proof teal, for matching the pattern tile bg */
--magenta: #D70185; /* stamp pink: CTAs, accents */
--magenta-deep: #A8005F; /* magenta text on cream, hover/pressed */
--magenta-soft: #F8D3E6; /* tint for chips/backgrounds */
--marigold: #FFBE00; /* shawl yellow: highlights, badges */
--marigold-soft: #FFE7A3;
--cream: #FFF8EC; /* warm off-white for food sections */
--paper: #F5E9D3; /* slightly darker cream: cards, bands */
--ink: #22150F; /* near-black warm text */
--brown: #5A3A22; /* serif logo brown (unsampled, from PLAN) */
--gold: #C9A04A; /* foil rules/accents (box foil sampled ~#D3AB5E) */
--gold-light: #E0BB6D; /* gold text/rules on dark teal */
--skin: #D28664; /* illustration skin tone */
--white: #FFFFFF;
/* ---- semantic ---- */
--bg: var(--cream);
--bg-alt: var(--paper);
--bg-brand: var(--teal);
--text: var(--ink);
--text-muted: #5C4A3F; /* on cream 7.9:1 */
--text-on-brand: var(--cream);
--accent: var(--magenta);
--accent-text: var(--magenta-deep);
--cta: var(--magenta);
--cta-hover: var(--magenta-deep);
--cta-text: var(--white);
--line: rgba(34, 21, 15, .14);
--line-brand: rgba(255, 248, 236, .22);
--focus: var(--marigold);
/* ---- type families ---- */
--font-display: "Grandstander", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
--font-serif: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
/* ---- fluid type scale (360px -> 1440px viewport) ---- */
--step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9rem);
--step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
--step-2: clamp(1.45rem, 1.2rem + 1.2vw, 2.1rem);
--step-3: clamp(1.8rem, 1.35rem + 2.2vw, 3rem);
--step-4: clamp(2.3rem, 1.5rem + 4vw, 4.5rem);
--step-5: clamp(3rem, 1.6rem + 7vw, 7.5rem);
--leading-tight: 1.05;
--leading-snug: 1.25;
--leading-body: 1.6;
/* ---- spacing scale ---- */
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-s: 1rem;
--space-m: 1.5rem;
--space-l: 2rem;
--space-xl: 3rem;
--space-2xl: 4.5rem;
--space-3xl: 7rem;
--space-section: clamp(4rem, 3rem + 6vw, 9rem);
--gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* 16px on a 390 phone */
--container: 76rem;
/* ---- shape / depth / motion ---- */
--radius-s: 6px;
--radius-m: 14px;
--radius-l: 28px;
--shadow-1: 0 1px 2px rgba(34,21,15,.12), 0 4px 12px rgba(34,21,15,.08);
--shadow-2: 0 10px 30px rgba(34,21,15,.18);
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-thud: cubic-bezier(.34, 1.56, .64, 1);
--dur-fast: .18s;
--dur: .45s;
--dur-slow: .9s;
}