/* ==========================================================================
   TOKENS: the only file you change per client.
   Plain numbers in, smooth scaling out. Everything in system.css reads these.

   Sizes are given as two numbers: the size on a small phone and the size on
   a desktop. Between those two screens the size glides smoothly. No breakpoints.
   ========================================================================== */

/* Fonts. Swap the URL for the client's fonts (Google Fonts › select › copy the <link> href).
   For stricter GDPR, upload the fonts with Elementor › Custom Fonts instead and delete this line. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Poppins:wght@400;500;600&display=swap');

:root {
  /* ── 1. Screen range ─────────────────────────────────────────────
     The two screen widths your sizes are designed at (match your Figma frames).
     Narrower than "phone", sizes stop shrinking; wider than "desktop", they stop growing. */
  --screen-phone: 360;
  --screen-desktop: 1440;

  /* ── 2. Colours ──────────────────────────────────────────────────
     Five colours. Text, muted text, lines and soft backgrounds are mixed from these automatically. */
  --c-ink:     #000F1E;   /* headings and dark sections */
  --c-bg:      #F7F7FF;   /* page background */
  --c-surface: #FFFFFF;   /* cards */
  --c-brand:   #0A2444;   /* main brand colour */
  --c-accent:  #FF4438;   /* buttons and highlights. Use sparingly */
  --c-on-accent: #FFFFFF; /* text on accent buttons */
  --gradient: linear-gradient(160deg, #0A2444 0%, #051222 70%, #051222 100%);

  /* ── 3. Fonts ────────────────────────────────────────────────── */
  --font-head: 'Outfit', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
  --fw-head: 600;
  --fw-body: 400;
  --fw-bold: 600;

  /* ── 4. Type sizes (px) ──────────────────────────────────────────
     Size on a phone, then size on a desktop. Between the two it slides smoothly.
     Headings grow more than body text, so phones stay calm and desktops get real contrast. */
  --small-phone: 13;        --small-desktop: 14;
  --body-phone: 16;         --body-desktop: 18;
  --lead-phone: 19;         --lead-desktop: 24;
  --h4-phone: 19;           --h4-desktop: 24;
  --h3-phone: 23;           --h3-desktop: 32;
  --h2-phone: 28;           --h2-desktop: 43;
  --h1-phone: 33;           --h1-desktop: 57;
  --display-phone: 40;      --display-desktop: 76;

  /* ── 5. Spacing (px) ─────────────────────────────────────────────
     Phone sizes sit on the 8px grid; desktop opens each one up by a quarter for more breathing room.
     The gap between widgets uses "s", stack-m and card padding use "m", and so on. */
  --space-3xs-phone: 4;     --space-3xs-desktop: 5;
  --space-2xs-phone: 8;     --space-2xs-desktop: 10;
  --space-xs-phone: 12;     --space-xs-desktop: 15;
  --space-s-phone: 16;      --space-s-desktop: 20;
  --space-m-phone: 24;      --space-m-desktop: 30;
  --space-l-phone: 32;      --space-l-desktop: 40;
  --space-xl-phone: 48;     --space-xl-desktop: 60;
  --space-2xl-phone: 64;    --space-2xl-desktop: 80;
  --space-3xl-phone: 96;    --space-3xl-desktop: 120;
  --section-phone: 64;      --section-desktop: 128;
  --gutter-phone: 20;       --gutter-desktop: 40;

  /* ── 6. Layout ───────────────────────────────────────────────── */
  --max: 1200px;        /* content width */
  --max-narrow: 760px;  /* .narrow sections */
  --measure: 62ch;      /* comfortable paragraph width */

  /* ── 7. Shape ────────────────────────────────────────────────── */
  --radius-s: 4px;
  --radius: 8px;
  --radius-l: 16px;
  --radius-btn: 999px;  /* 999px = pill. 8px = soft square */
}

/* ── Optional: override any single size. Uncomment and set.
:root {
  --fs-h1: 3rem;           fixed 48px at every size
  --sp-section: 6rem;
}
*/