/* ==========================================================================
   Sonex Branding — Design Tokens
   Every colour, font, size and spacing value used across the site.
   Change it here, it changes everywhere.
   ========================================================================== */

:root {
  /* ---------- Brand colours ---------- */
  --c-green: #19AC46;          /* primary brand green — buttons, accents, borders */
  --c-green-hover: #1AAC47;    /* nav link hover */
  --c-green-bright: #14E731;   /* active nav item */
  --c-green-light: #6EE496;    /* card title on hover */
  --c-green-light-alt: #6EE48C;/* card title on hover (printing card) */
  --c-green-deep: #11700E;     /* header gradient tail */
  --c-green-dark: #419631;     /* portfolio slide title hover */
  --c-green-brand: #19AA47;    /* copy highlights, About page accents */

  /* ---------- Neutrals ---------- */
  --c-black: #000000;          /* page background */
  --c-surface: #121212;        /* service card background */
  --c-overlay: #080808;        /* hero slideshow overlay */
  --c-white: #FFFFFF;
  --c-heading: #F6F6F6;        /* section headings on dark */
  --c-muted: #A1A1A1;          /* body copy on dark */
  --c-border: #c4c4c4;         /* dropdown dividers */
  --c-track: rgba(97, 206, 112, 0.1); /* progress bar track */
  --c-slate: #334155;          /* inherited body colour — service card borders */
  --c-card-plum: #623D3D;      /* service card base colour behind its texture */
  --c-off-white: #F7F6F6;      /* service card copy */
  --c-green-title: #08AB0B;    /* Services page banner heading */
  --c-green-divider: #0E5424;  /* double rule under the banner */
  --c-error: #d63637;          /* form validation messages */
  --c-btn-accent: #61CE70;     /* Elementor accent — service card buttons */

  /* ---------- Gradients & overlays ---------- */
  --g-header: linear-gradient(148deg, #000000 91%, #11700E 100%);
  --g-slide-fade: linear-gradient(360deg, #000 0%, #00000000 100%);

  /* ---------- Typography ---------- */
  --f-display: "Syne", sans-serif;      /* headings, buttons, nav */
  --f-body: "Jost", sans-serif;         /* body copy, lists */
  --f-slab: "Roboto Slab", serif;       /* service card CTAs */

  --fs-hero: 100px;
  --fs-h2: 42px;
  --fs-h3: 30px;
  --fs-num: 50px;      /* the 01 / 02 / 03 card numerals */
  --fs-counter: 63px;
  --fs-nav: 21px;
  --fs-btn: 20px;
  --fs-body: 17px;
  --fs-small: 16px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-body: 23px;
  --lh-tight: 1em;

  /* ---------- Layout ---------- */
  --container: 1330px;
  --header-h: 130px;

  /* ---------- Radii ---------- */
  --r-card: 8px;
  --r-btn: 7px;

  /* ---------- Borders ---------- */
  --bw-accent: 2px;

  /* ---------- Motion ---------- */
  --t-fast: 0.3s ease;
  --t-slow: 0.7s ease;
  --ease-slide: cubic-bezier(0.3, 0, 0.3, 1);

  /* ---------- Shadow ---------- */
  --sh-text: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

/* Fluid down-scaling of the big display sizes on smaller screens.
   Kept as token overrides so page CSS never has to repeat breakpoints. */
@media (max-width: 1024px) {
  :root {
    --fs-hero: 68px;
    --fs-h2: 36px;
    --fs-counter: 52px;
    --fs-nav: 18px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-hero: 42px;
    --fs-h2: 30px;
    --fs-h3: 26px;
    --fs-num: 40px;
    --fs-counter: 44px;
    --fs-btn: 17px;
    --header-h: 84px;
  }
}