/* =========================================================
   Design tokens
   ---------------------------------------------------------
   This is THE place to change colours, fonts and spacing.
   Everything else in the CSS refers to these variables.
   ========================================================= */

/* ---- Self-hosted fonts (no Google, no external requests) ---- */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colours ---- */
  --ink: #2a1a35;          /* aubergine: text, dark backgrounds */
  --ink-soft: #5b4a68;     /* secondary text */
  --paper: #f7f5fa;        /* page background */
  --paper-deep: #ece6f2;   /* tinted panels */
  --white: #ffffff;

  /* The four DEIB colours. "-light" variants are for use on dark (--ink) backgrounds. */
  --teal: #12756b;          --teal-light: #5fd0c0;      /* Diversity  / Beratung  */
  --marigold: #b86e00;      --marigold-light: #f4a62a;  /* Equity                 */
  --rose: #c2326a;          --rose-light: #f37aa5;      /* Inclusion  / Keynote   */
  --cobalt: #3553c9;        --cobalt-light: #9aaeff;    /* Belonging  / Workshops */

  --focus: #3553c9;
  --error: #b3261e;

  /* ---- Typography ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

  --text-sm: 0.9375rem;
  --text-base: 1.125rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --text-2xl: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  --text-hero: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);

  /* ---- Spacing & shape ---- */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2.5rem, 2rem + 2vw, 4rem);
  --space-xl: clamp(4rem, 3rem + 5vw, 8rem);

  --page-width: 72rem;
  --text-width: 38rem;
  --radius: 0.75rem;

  /* Organic "pebble" shape used for photos and shapes */
  --pebble: 46% 54% 42% 58% / 55% 44% 56% 45%;
}