/*
  Theme: Your Mates Plumbing colours, fonts and spacing.

  This is the ONLY file where colours and fonts are set. Every other
  stylesheet (including the nav component) reads these custom properties.
  The palette comes from the logo and the truck livery: water blue,
  eucalyptus green and deep harbour navy on clean white.
*/

/* Archivo: one variable font file (weights 400 to 800, widths 100 to 125%),
   trimmed to basic English letters, numbers and common punctuation
   (’ ‘ “ ” – — … • © ×) so the whole site loads a single 29 KB file.
   Any other character (such as é) shows in the fallback font. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("../fonts/archivo.woff2") format("woff2");
}

/* Arial, resized to take up the same space as Archivo while it loads,
   so text does not jump when the web font arrives. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%;
  ascent-override: 88%;
  descent-override: 21%;
  line-gap-override: 0%;
}

:root {
  /* Colour */
  --colour-paper: #ffffff;          /* page background */
  --colour-surface: #ffffff;        /* cards, mobile menu panel */
  --colour-mist: #eef5fa;           /* pale water tint for alternate sections */
  --colour-ink: #0f2130;            /* headings and body text */
  --colour-ink-muted: #4a5d6b;      /* secondary text (6.6:1 on white) */
  --colour-line: #d5e1e9;           /* borders and dividers */
  --colour-brand: #1d8fd1;          /* logo water blue: icons and large accents */
  --colour-accent: #0a6aa8;         /* links, buttons, focus ring (5.6:1 with white) */
  --colour-accent-strong: #07507f;  /* hover and pressed states */
  --colour-on-accent: #ffffff;      /* text on accent and dark backgrounds */
  --colour-gum: #4f7f22;            /* logo eucalyptus green: ticks and badges */
  --colour-gum-ink: #36601a;        /* green text on white (6.4:1) */
  --colour-harbour: #0b2a40;        /* deep navy band */
  --colour-harbour-muted: #b9cddb;  /* secondary text on the navy band */
  --colour-star: #f5b301;           /* review stars */
  --colour-notice: #fff8e1;         /* information panels */
  --colour-notice-line: #f1dc9a;
  --colour-shadow: rgba(15, 33, 48, 0.12);

  /* Fonts */
  --font-body: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --stretch-display: 112%;          /* headings: slightly wide, like the truck signwriting */
  --stretch-phone: 125%;            /* the big phone number: fully expanded */

  /* Type scale (about 1.25) */
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;           /* 17 px body copy */
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 3.2vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 5vw, 3.5rem);
  --text-phone: clamp(1.75rem, 8.4vw, 3.6rem);   /* sized so the number never wraps or overflows */
  --leading-body: 1.6;
  --leading-tight: 1.1;
  --tracking-display: -0.02em;
  --measure: 66ch;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --section-space: clamp(3.5rem, 8vw, 6.5rem);

  /* Layout */
  --page-gutter: clamp(1.25rem, 5vw, 3rem);
  --page-max-width: calc(74rem + 2 * var(--page-gutter));
  --radius: 0.5rem;
  --radius-lg: 1rem;

  /* Navigation */
  --nav-bar-height: 4.5rem;
  --nav-link-gap: clamp(0.25rem, 1.6vw, 1.25rem);
  --nav-link-padding: var(--space-2) var(--space-2);
  --nav-current-weight: 600;
  --nav-logo-width: clamp(118px, 13vw, 150px);
  --nav-action-radius: var(--radius);
  --focus-ring: 3px solid var(--colour-accent);
  --focus-offset: 3px;

  /* Stacking order: the header must sit above everything else on the page */
  --z-nav: 1000;

  /* Motion */
  --duration-fast: 160ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);

  /*
    Breakpoint (for reference only: custom properties cannot be used inside
    media queries). The mobile menu applies under 768 px; 768 px and wider is
    the desktop menu. nav.css and nav.js both use this value.
  */
}