/* ===========================================================================
 * Crane Street Design System — Ballina Shire Meals on Wheels
 * Derived from BSMOW brand equity: logo mark (greens/blues) + own photography
 * (warm timber/honey). Built for an audience of seniors, carers, and people
 * with disability: large type, AA+ contrast, generous targets, no surprises.
 * Authored by Boorn.Digital · v0.1
 * ========================================================================= */

@font-face { font-family:'Bricolage Grotesque'; font-weight:500; font-display:swap; src:url('../fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Bricolage Grotesque'; font-weight:600; font-display:swap; src:url('../fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Bricolage Grotesque'; font-weight:700; font-display:swap; src:url('../fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Public Sans'; font-weight:400; font-display:swap; src:url('../fonts/public-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Public Sans'; font-weight:500; font-display:swap; src:url('../fonts/public-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Public Sans'; font-weight:600; font-display:swap; src:url('../fonts/public-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Public Sans'; font-weight:700; font-display:swap; src:url('../fonts/public-sans-latin-700-normal.woff2') format('woff2'); }

:root {
  /* ---------- Ocean — from the logo's deep blues (primary) ---------- */
  --ocean-50:  #EEF4FA;
  --ocean-100: #DCE9F5;
  --ocean-200: #B4CFE8;
  --ocean-300: #7FA9D2;
  --ocean-500: #2563A8;  /* interactive blue */
  --ocean-700: #1D4373;  /* primary brand / headings */
  --ocean-800: #17365D;
  --ocean-900: #122A49;  /* hero scrims, footer */

  /* ---------- Sprout — from the logo's fresh green (action) ---------- */
  --sprout-50:  #EAF7EF;
  --sprout-100: #D5F0E0;
  --sprout-300: #7ED4A3;
  --sprout-500: #2DB568;  /* logo green — decorative/icons */
  --sprout-600: #1E8A4C;  /* buttons: AA on white */
  --sprout-700: #176B3B;  /* button hover, links */

  /* ---------- Sky — from the logo's light blue (sparingly) ---------- */
  --sky-100: #DFF1FB;
  --sky-500: #0C92D4;

  /* ---------- Honey — from their photography's warm timber (warmth) --- */
  --honey-50:  #FBF3E4;
  --honey-100: #F6E7C9;
  --honey-500: #C08A2E;  /* accents, highlights */
  --honey-700: #8A6015;  /* donate / warm CTA, AA on white */

  /* ---------- Neutrals — warm paper, deep ink ---------- */
  --paper:     #FBFAF7;  /* page */
  --cream:     #F5F2EB;  /* alt sections */
  --sand-200:  #E7E2D6;
  --sand-400:  #B9B2A1;
  --grey-600:  #5A6069;  /* secondary text (AA on paper) */
  --ink:       #20242B;  /* body text (AAA) */

  /* ---------- Semantic ---------- */
  --bg-page: var(--paper);
  --bg-alt: var(--cream);
  --bg-band: var(--ocean-700);
  --fg-default: var(--ink);
  --fg-muted: var(--grey-600);
  --fg-on-dark: #FFFFFF;
  --color-primary: var(--sprout-600);
  --color-primary-hover: var(--sprout-700);
  --color-secondary: var(--ocean-700);
  --color-warm: var(--honey-700);
  --link: var(--ocean-500);
  --focus-ring: 0 0 0 4px rgba(45,181,104,.35);

  /* ---------- Type — sized for older eyes ---------- */
  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --t-base: 18px;      /* body — never below 18 on this site */
  --t-sm: 16px;        /* captions minimum */
  --t-md: 21px;
  --t-lg: 26px;
  --t-xl: 34px;
  --t-2xl: 44px;
  --t-3xl: 58px;       /* hero */
  --lh-body: 1.65; /* @kind font */
  --lh-tight: 1.12; /* @kind font */

  /* ---------- Shape & depth — soft, friendly, calm ---------- */
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(18,42,73,.06), 0 6px 20px rgba(18,42,73,.07);
  --shadow-lift: 0 2px 4px rgba(18,42,73,.08), 0 14px 34px rgba(18,42,73,.12);

  /* ---------- Spacing ---------- */
  --sp-1: 6px; --sp-2: 10px; --sp-3: 14px; --sp-4: 18px; --sp-5: 24px;
  --sp-6: 32px; --sp-8: 44px; --sp-10: 60px; --sp-12: 80px; --sp-16: 110px;
}

/* ---------- Base ---------- */
.cs-root { font-family: var(--font-body); font-size: var(--t-base); line-height: var(--lh-body); color: var(--fg-default); background: var(--bg-page); -webkit-font-smoothing: antialiased; }
.cs-display, .cs-h1, .cs-h2, .cs-h3 { font-family: var(--font-display); line-height: var(--lh-tight); color: var(--ocean-700); font-weight: 600; letter-spacing: -0.015em; }
.cs-h1 { font-size: var(--t-3xl); font-weight: 700; }
.cs-h2 { font-size: var(--t-2xl); }
.cs-h3 { font-size: var(--t-lg); }
.cs-eyebrow { font: 600 15px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--sprout-600); }
.cs-lead { font-size: var(--t-md); color: var(--fg-muted); }

/* ---------- Buttons — min 52px tall, obvious, focusable ---------- */
.cs-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 28px; border-radius:var(--radius-pill); font:600 var(--t-base)/1 var(--font-body); text-decoration:none; border:2px solid transparent; cursor:pointer; }
.cs-btn:focus-visible { outline:none; box-shadow: var(--focus-ring); }
.cs-btn--primary { background: var(--sprout-600); color:#fff; }
.cs-btn--primary:hover { background: var(--sprout-700); }
.cs-btn--secondary { background:#fff; color:var(--ocean-700); border-color:var(--ocean-200); }
.cs-btn--ghost-dark { background:rgba(255,255,255,.2); color:#fff; border-color:rgba(255,255,255,.85); }
.cs-btn--warm { background: var(--honey-700); color:#fff; }

/* ---------- Cards ---------- */
.cs-card { background:#fff; border:1px solid var(--sand-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }

/* ---------- Hero scrim — text NEVER sits raw on a photo ---------- */
.cs-scrim { background: linear-gradient(100deg, rgba(18,42,73,.88) 0%, rgba(18,42,73,.62) 46%, rgba(18,42,73,.18) 100%); }

/* ---------- Chips (delivery suburbs) ---------- */
.cs-chip { display:inline-block; padding:9px 18px; border-radius:var(--radius-pill); background:#fff; border:1.5px solid var(--sand-200); font:500 var(--t-sm)/1 var(--font-body); color:var(--ink); }

/* ---------- Accessibility contract ----------
 * Body text ≥18px; UI text ≥16px. Contrast: body AAA on paper, all UI ≥AA.
 * Focus visible on every interactive element. Targets ≥44×44px.
 * No captcha (use invisible Turnstile). Respect prefers-reduced-motion.
 * Alt text mandatory. Headings strictly nested. Forms: labelled, typed,
 * autocomplete attributes, errors in text not colour alone. */