/* ============================================
   YBD Interactive Brand Guide — Design Tokens
   Sourced from Figma variables
   ============================================ */

:root {
  /* ---------- Brand Colours ---------- */
  --color-brand-blue: #0256ff;
  --color-brand-dark-blue: #00013d;
  --color-brand-light-blue: #beeaff;
  --color-brand-pale: #ffeecd;      /* warm cream page bg */
  --color-brand-honey: #ffb92e;
  --color-brand-beige: #fff9f0;
  --color-brand-pink: #ffccf6;
  --color-brand-mint: #aeffdc;
  --color-brand-red: #ed080c;

  /* ---------- Neutrals ---------- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-grey: #d4d4e1;
  --color-light-grey: #f2f2f2;
  --color-soft-blue: #eef0ff;

  /* ---------- Semantic surfaces ---------- */
  --surface-page: var(--color-brand-pale);
  --surface-card: var(--color-white);
  --surface-header: var(--color-brand-blue);
  --surface-inverse: var(--color-brand-dark-blue);

  /* ---------- Text ---------- */
  --text-primary: var(--color-brand-dark-blue);
  --text-secondary: #4b4b6b;
  --text-inverse: var(--color-white);
  --text-brand: var(--color-brand-blue);

  /* ---------- Borders ---------- */
  --border-strong: var(--color-brand-dark-blue);
  --border-subtle: var(--color-grey);

  /* ---------- Typography ---------- */
  /* Brand fonts only — `sans-serif` is a generic family (not a specific font), used
     as a last-resort fallback if the webfont fails to load. */
  --font-display: "Erica One", sans-serif;
  --font-body: "Figtree", sans-serif;

  /* Type scale — matches Figma design system exactly (variable defs from Figma) */
  --fs-h1: clamp(3rem, 6vw, 4.75rem);   /* 48 → 76px · Erica One Display · fluid */
  --fs-h2: 2.25rem;                      /* 36px      · Figtree Bold */
  --fs-h3: 1.875rem;                     /* 30px      · Figtree Bold */
  --fs-h4: 1.75rem;                      /* 28px      · Figtree Bold */
  --fs-body: 1.125rem;                   /* 18px      · Figtree */
  --fs-caption: 0.875rem;                /* 14px      · Figtree */
  --fs-cta: 1.125rem;                    /* 18px Bold · Figtree */

  /* Line heights — matches Figma spec */
  --lh-display: 0.7;   /* 53/76 — H1 display, tight */
  --lh-heading: 1.2;   /* H2, H3, H4 */
  --lh-body: 1.2;      /* 21.6/18 — body */
  --lh-cta: 1;         /* CTA buttons */

  /* Loose body line-height for long-form reading (not from the strict spec) */
  --lh-reading: 1.5;

  /* ---------- Spacing ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --space-80: 80px;

  --h-padding: 24px;
  --v-padding: 16px;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 99px;
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-s: 0 2px 10px -4px rgba(184, 184, 184, 0.7);
  --shadow-m: 0 4px 13px -2px rgba(184, 184, 184, 0.64);
  --shadow-l: 0 6px 24px 2px rgba(184, 184, 184, 0.34);

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --content-max: 1264px;
  --page-gutter: clamp(20px, 4vw, 56px);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-med: 260ms;
}