/* ==========================================================================
   tokens.css — Global design tokens (single source of truth)
   Change a value here and it updates everywhere across the site.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Brand palette (pulled from Figma)
     "main" = orange ramp, "contrast" = purple ramp.
     ------------------------------------------------------------------------ */
  --brand-background: #fef8f2;
  --brand-main-0: #fcf1e5;
  --brand-main-1: #f5c899;
  --brand-main-2: #ed9e4d;
  --brand-main-3: #e57500;
  --brand-main-4: #733b00;
  --brand-contrast-0: #f1e9f6;
  --brand-contrast-1: #c7a9dc;
  --brand-contrast-2: #9d69c1;
  --brand-contrast-3: #7328a7;

  /* Semantic colours — map roles onto the brand palette */
  --color-bg: var(--brand-background);
  --color-surface: var(--brand-main-0);
  --color-text: var(--brand-main-4);
  --color-muted: var(--brand-contrast-2);
  --color-primary: var(--brand-main-4);
  --color-primary-hover: var(--brand-main-3);
  --color-accent: var(--brand-contrast-3);
  --color-border: var(--brand-main-1);

  /* --------------------------------------------------------------------------
     Typography (pulled from Figma text styles)
     ------------------------------------------------------------------------ */
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-heading: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-display: "Gasoek One", "Montserrat", system-ui, sans-serif;
  --font-size-base: 16px;
  --line-height: 1.6;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Named text styles from Figma (size / weight / line-height) */
  --text-subhead-size: 1rem;       /* 16px — Gasoek One, 400 */
  --text-subhead-lh: 1;
  --text-h2-size: 1.5rem;          /* 24px — Montserrat, 700 */
  --text-h2-lh: 1;
  --text-h3-size: 1rem;            /* 16px — Montserrat, 500 */
  --text-h3-lh: 1;
  --text-paragraph-size: 0.875rem; /* 14px — Montserrat, 500 */
  --text-paragraph-lh: 1.4286;     /* 20px */
  --text-emphasis-size: 0.875rem;  /* 14px — Montserrat, 700 */
  --text-emphasis-lh: 1.4286;      /* 20px */
  --text-note-size: 0.75rem;       /* 12px — Montserrat, 500 italic */
  --text-note-lh: 1.6667;          /* 20px */

  /* Type scale */
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 2rem;
  --text-2xl: 3rem;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-lg: 40px;
  --max-width: 1100px;
  --header-height: 80px;
}