/* ============================================================
   Teranga Grill — design-system tokens (self-contained copy)
   Bundled from the design system so teranga-site/ works standalone.
   ============================================================ */

/* ---- tokens/fonts.css ---- */
/* ──────────────────────────────────────────────────────────
   Webfonts — Teranga Grill
   Headings: Zilla Slab (500 / 600 / 700)   Body: Outfit (400–700)
   Self-hosted for the WordPress build — the @font-face rules live in
   assets/css/fonts.css (enqueued before this file); no external request.
   ────────────────────────────────────────────────────────── */

/* ---- tokens/colors.css ---- */
:root {
  /* ── Brand base palette ─────────────────────────────── */
  --ink: #2A1606;        /* near-black warm brown — text, dark surfaces */
  --green: #3E5022;      /* olive/forest — Donate, give-back, growth */
  --gold: #CC8018;       /* warm amber — highlights, step 2, accents */
  --terracotta: #B3420B; /* burnt orange — primary CTA (Pre-order), eyebrow */
  --cream: #F4E7D0;      /* warm sand — deeper page background (demo-2 warmer base) */

  /* ── Tints & shades (derived, warm) ─────────────────── */
  --ink-80: #4a341f;
  --ink-60: #6d5a45;
  --green-700: #324019;
  --green-300: #6f8350;
  --gold-300: #e0a955;
  --terracotta-700: #8f330a;
  --terracotta-300: #d4753f;

  /* Surface tints */
  --cream-2: #ECDDC0;    /* slightly deeper warm sand — alt sections */
  --cream-3: #E6D4B3;    /* card / image-placeholder warm tan */
  --hairline: #DAC6A0;   /* warm divider on sand */
  --hairline-dark: rgba(254, 248, 236, 0.14); /* divider on ink */

  /* ── Semantic aliases ───────────────────────────────── */
  --bg-page: var(--cream);
  --bg-alt: var(--cream-2);
  --bg-dark: var(--ink);
  --surface-card: #ffffff;
  --surface-tan: var(--cream-3);

  --text-strong: var(--ink);
  --text-body: var(--ink-80);
  --text-muted: var(--ink-60);
  --text-on-dark: var(--cream);
  --text-on-dark-muted: rgba(254, 248, 236, 0.72);
  --text-accent: var(--terracotta);

  --border-soft: var(--hairline);
  --border-strong: var(--ink);

  /* Action colors */
  --action-primary: var(--terracotta);
  --action-primary-hover: var(--terracotta-700);
  --action-donate: var(--green);
  --action-donate-hover: var(--green-700);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(204, 128, 24, 0.45);
}

/* ---- tokens/typography.css ---- */
:root {
  /* ── Font families ──────────────────────────────────── */
  --font-heading: "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Weights (type metrics — intentionally uncategorized) ── */
  --fw-regular: 400;  /* @kind other */
  --fw-medium: 500;   /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700;     /* @kind other */

  /* ── Type scale (mobile-first, fluid) ───────────────── */
  --fs-eyebrow: 0.8125rem;   /* @kind other */ /* 13px — uppercase tracked label */
  --fs-caption: 0.8125rem;   /* @kind other */ /* 13px */
  --fs-small: 0.9375rem;     /* @kind other */ /* 15px */
  --fs-body: 1rem;           /* @kind other */ /* 16px */
  --fs-body-lg: 1.125rem;    /* @kind other */ /* 18px — hero subline */
  --fs-h5: 1.125rem;         /* @kind other */ /* 18px */
  --fs-h4: 1.375rem;         /* @kind other */ /* 22px */
  --fs-h3: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem); /* @kind other */   /* 24 → 30 */
  --fs-h2: clamp(1.875rem, 1.4rem + 2.2vw, 2.625rem); /* @kind other */ /* 30 → 42 */
  --fs-h1: clamp(2.5rem, 1.6rem + 4.2vw, 3.75rem); /* @kind other */    /* 40 → 60 */
  --fs-stat: clamp(2.75rem, 1.8rem + 4.5vw, 4rem); /* @kind other */    /* counters */

  /* ── Line heights ───────────────────────────────────── */
  --lh-tight: 1.04; /* @kind other */
  --lh-snug: 1.18;  /* @kind other */
  --lh-body: 1.6;   /* @kind other */

  /* ── Letter spacing ─────────────────────────────────── */
  --ls-eyebrow: 0.14em;  /* @kind other */ /* uppercase eyebrows */
  --ls-tight: -0.01em;   /* @kind other */ /* large serif headlines */
  --ls-normal: 0;        /* @kind other */
}

/* ---- tokens/spacing.css ---- */
:root {
  /* ── Spacing scale (4px base) ───────────────────────── */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */

  /* Section rhythm */
  --section-y: clamp(3rem, 2rem + 5vw, 6rem); /* @kind spacing */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ── Radii ──────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;     /* buttons, inputs */
  --radius-lg: 16px;     /* cards, image wells */
  --radius-xl: 24px;
  --radius-pill: 999px;  /* badges, step numbers, chips */

  /* ── Control sizing (≥44px tap targets) ─────────────── */
  --control-h: 48px;
  --control-h-sm: 40px;
  --tap-min: 44px;
}

/* ---- tokens/elevation.css ---- */
:root {
  /* ── Shadows — warm, soft, low-contrast ─────────────── */
  --shadow-xs: 0 1px 2px rgba(42, 22, 6, 0.06);
  --shadow-sm: 0 2px 8px rgba(42, 22, 6, 0.07);
  --shadow-md: 0 6px 20px rgba(42, 22, 6, 0.10);
  --shadow-lg: 0 16px 40px rgba(42, 22, 6, 0.14);
  /* Sticky header shadow once scrolled */
  --shadow-header: 0 4px 18px rgba(42, 22, 6, 0.12);
  /* Mobile bottom action bar (upward) */
  --shadow-bottombar: 0 -6px 20px rgba(42, 22, 6, 0.12);

  /* ── Motion ─────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur-base: 240ms;  /* @kind other */
  --dur-slow: 420ms;  /* @kind other */

  /* ── Layout fixtures ────────────────────────────────── */
  --header-h: 88px;        /* tall top bar @kind spacing */
  --header-h-compact: 64px;/* scrolled slim strip @kind spacing */
  --bottombar-h: 68px;     /* mobile sticky actions @kind spacing */
  --z-header: 1000;   /* @kind other */
  --z-drawer: 1100;   /* @kind other */
  --z-bottombar: 900; /* @kind other */
}