/* =====================================================================
   Sterk Scout design tokens
   Every colour, font size, space, radius and shadow used on the site
   is defined here. Change a value here and it changes everywhere.
   Documentation: DESIGN-SYSTEM.md · Live style guide: /design-system.html
   ===================================================================== */

/* Inter (variable weight, Latin), self-hosted. Licence: /assets/fonts/OFL.txt */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* Arial tuned to Inter's size, so text doesn't jump while Inter loads */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

:root {
  /* ---------- Brand colours (from "Logo Color Codes.xlsx") ---------- */
  --brand-teal: #07363c;   /* logo background */
  --brand-yellow: #ffde59; /* "Sterk Star" yellow */
  --brand-white: #ffffff;  /* slogan */

  /* ---------- Palette ---------- */
  --teal-950: #042529;
  --teal-900: #07363c;     /* = brand teal */
  --teal-800: #0d4a51;
  --teal-100: #d9e8e7;
  --teal-50: #eef5f4;
  --yellow-500: #f5cd3d;
  --yellow-400: #ffde59;   /* = brand yellow */
  --yellow-200: #ffeda6;
  --yellow-100: #fff6d6;
  --gold-800: #6b4f00;     /* yellow family, dark enough for text */
  --ink: #13292d;
  --muted: #55686c;
  --sand: #f7f4ee;
  --line: #e4e1da;
  --white: #ffffff;
  --success: #2f7d5b;
  --danger: #b3261e;
  --field-border: #74888b;

  /* ---------- What each colour is for ---------- */
  --color-bg: var(--white);
  --color-bg-alt: var(--sand);
  --color-surface: var(--white);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-heading: var(--teal-900);
  --color-line: var(--line);
  --color-link: var(--teal-900);
  --color-focus: var(--teal-900);

  --color-primary: var(--teal-900);
  --color-primary-hover: var(--teal-800);
  --color-on-primary: var(--white);
  --color-accent: var(--yellow-400);
  --color-accent-hover: var(--yellow-500);
  --color-on-accent: var(--teal-900);

  /* Dark surfaces: header, footer, dark hero, dark bands */
  --color-dark-bg: var(--teal-900);
  --color-dark-bg-deep: var(--teal-950);
  --color-dark-text: var(--white);
  --color-dark-muted: #c5d9d8;
  --color-dark-line: rgba(255, 255, 255, 0.14);

  /* Service accents: recruitment = teal, creators = yellow */
  --recruit: var(--teal-900);
  --recruit-soft: var(--teal-50);
  --recruit-on: var(--white);
  --creator: var(--yellow-400);
  --creator-soft: var(--yellow-100);
  --creator-on: var(--teal-900);
  --creator-text: var(--gold-800);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-14: 0.875rem;  /* 14px small print, labels */
  --fs-16: 1rem;      /* 16px body */
  --fs-18: 1.125rem;  /* 18px large body */
  --fs-22: 1.375rem;  /* 22px h3, lead on desktop */
  --fs-28: 1.75rem;   /* 28px h2 on mobile */
  --fs-36: 2.25rem;   /* 36px h1 on mobile, h2 on desktop */
  --fs-48: 3rem;      /* 48px display */
  --fs-60: 3.75rem;   /* 60px h1 on desktop */
  --fs-h1: clamp(2.25rem, 1.55rem + 2.9vw, 3.75rem);   /* 36 → 60 */
  --fs-h2: clamp(1.75rem, 1.5rem + 1.05vw, 2.25rem);   /* 28 → 36 */
  --fs-h3: var(--fs-22);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); /* 18 → 22 */
  --lh-body: 1.5;
  --lh-heading: 1.15;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-extrabold: 800;
  --tracking-tight: -0.022em;
  --tracking-wide: 0.08em;

  /* ---------- Spacing (4-point scale) ---------- */
  --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 */

  /* ---------- Shape ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(7, 54, 60, 0.06), 0 4px 14px rgba(7, 54, 60, 0.07);
  --shadow-2: 0 2px 6px rgba(7, 54, 60, 0.08), 0 20px 44px rgba(7, 54, 60, 0.14);

  /* ---------- Layout ---------- */
  --container: 1120px;
  --gutter: 16px;
  --header-h: 64px;
  /* Breakpoints (media queries can't read variables, so these are fixed numbers):
     small 640px · medium 960px · large 1200px */

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 900ms;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}

@media (min-width: 960px) {
  :root { --gutter: 32px; --header-h: 72px; }
}