/* Fonts on plain pages: Elementor loads the Site Settings fonts. If a page built
   without Elementor (e.g. Privacy Policy) shows the wrong font, uncomment the line
   below with the client's fonts. It must stay at the very top of this file. */
/* @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Poppins:wght@400;500;600&display=swap'); */

/* ==========================================================================
   TOKENS (Northcode Starter 1.3): the only file you change per client, and
   often you won't need to touch it at all.

   BRAND COLOURS AND FONTS NOW LIVE IN ELEMENTOR, not here:
     Elementor › Site Settings › Global Colours
       Primary   = headings and dark sections (the darkest brand colour)
       Secondary = the main brand colour
       Text      = body text
       Accent    = buttons and highlights. Use sparingly
     Elementor › Site Settings › Global Fonts
       Primary   = headings
       Text      = body text
     Leave font SIZES empty in Site Settings: the sizes below handle them.

   This file keeps what Elementor can't do well: page background colours,
   fluid sizes, spacing, and the style dials that make each site look different.
   Sizes are two numbers: the size on a small phone, then on a desktop.
   Between those two screens the size glides smoothly. No breakpoints.
   ========================================================================== */

:root {
  /* ── 1. Style dials ──────────────────────────────────────────────
     Change these to give a client a different feel. See the presets at the bottom. */
  --radius: 4px;            /* corners of cards, images, form fields. 0 = sharp, 12–16px = soft */
  --radius-btn: 4px;        /* button corners. 999px = pill */
  --density: 1;             /* all spacing inside sections. 0.9 = compact, 1.15 = airy */
  --section-scale: 1;       /* space between sections. 0.8 = tight, 1.25 = generous */
  --heading-case: none;     /* none, or uppercase */
  --heading-tracking: 0em;  /* extra letter spacing on headings. -0.01em = tighter, 0.02em = looser */
  --fw-head: 600;           /* heading weight, used if Site Settings doesn't set one */

  /* ── 2. Colours that aren't in Site Settings ─────────────────────
     Usually white or near-white. Check text on --c-bg reaches 4.5:1. */
  --c-bg:        #F7F7FF;   /* page background */
  --c-surface:   #FFFFFF;   /* cards and form fields */
  --c-on-accent: #FFFFFF;   /* text on accent buttons. Check it reaches 4.5:1 on the accent */
  /* The gradient is made from Secondary → Primary automatically.
     To use your own, uncomment and set: */
  /* --gradient-custom: linear-gradient(160deg, #0A2444 0%, #051222 70%, #051222 100%); */

  /* ── 3. Screen range ─────────────────────────────────────────────
     The two widths your sizes are designed at (match your Figma frames). Leave alone. */
  --screen-phone: 360;
  --screen-desktop: 1440;

  /* ── 4. Type sizes (px): phone, then desktop ──────────────────── */
  --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, then desktop ────────────────────────
     Phone sizes sit on the 8px grid; desktop opens each one up by a quarter.
     The density dial above scales all of these at once. */
  --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 */
}

/* ── Presets: copy one block over the dials in section 1 ──────────────

   NEUTRAL (default): suits anyone; a starting point, not a personality.
   --radius: 4px;  --radius-btn: 4px;  --density: 1;  --section-scale: 1;

   FRIENDLY: trades, salons, cafés, family businesses.
   --radius: 12px; --radius-btn: 999px; --density: 1.05; --section-scale: 1;

   FORMAL: solicitors, accountants, consultants.
   --radius: 0px;  --radius-btn: 0px;  --density: 1.15; --section-scale: 1.2;
   --heading-tracking: -0.01em;

   BOLD: events, gyms, creative studios.
   --radius: 0px;  --radius-btn: 0px;  --density: 0.95; --section-scale: 1;
   --heading-case: uppercase; --heading-tracking: 0.02em; --fw-head: 700;
*/