/* ==========================================================================
   TWB Waste Removals & Services — design tokens
   Colour, type, spacing, breakpoints. No component rules live here.
   ========================================================================== */

/* ---- Fonts (self-hosted, no external CDN) ------------------------------ */

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/geist-mono/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour --------------------------------------------------------- */
  --color-graphite: #16181b;   /* base background */
  --color-slate: #3a3e42;      /* card / section surfaces */
  --color-paper: #f3f1eb;      /* primary text on dark */
  /* Steel/trade blue, not tech-startup cyan or corporate navy. Picked bright
     enough (not just "medium blue") because this is a dark UI where the
     accent doubles as foreground text/icon colour on --color-graphite AND
     --color-surface as often as it's a button fill — a darker blue like a
     literal #2B5EA8 reads fine as a button but drops under 3:1 as text on
     these backgrounds. This value clears AA (4.5:1) against graphite and
     stays close to AA against the lighter slate surface. */
  --color-blue: #4a93c7;
  --color-blue-dark: color-mix(in srgb, var(--color-blue) 78%, black); /* hover/active, deeper contrast */
  --color-blue-light: color-mix(in srgb, var(--color-blue) 14%, var(--color-graphite)); /* subtle tint fills (badges, showcase band) */
  --color-trust-green: #4c9a6a; /* licensed/insured badges, checkmarks only */

  --color-bg: var(--color-graphite);
  --color-surface: var(--color-slate);
  --color-text: var(--color-paper);
  --color-text-muted: color-mix(in srgb, var(--color-paper) 68%, transparent);
  --color-border: color-mix(in srgb, var(--color-paper) 14%, transparent);
  --color-accent: var(--color-blue);
  --color-accent-text: var(--color-graphite);
  --color-trust: var(--color-trust-green);

  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.44rem, 1.3rem + 0.7vw, 1.8rem);
  --step-3: clamp(1.8rem, 1.55rem + 1.2vw, 2.4rem);
  --step-4: clamp(2.25rem, 1.85rem + 2vw, 3.4rem);
  --step-5: clamp(2.75rem, 2.1rem + 3.2vw, 4.6rem);

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --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: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Layout ------------------------------------------------------------ */
  --container-max: 72rem;
  --container-pad: var(--space-5);
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
}

/* ---- Breakpoints (reference only — used as literal values in media queries,
   custom media isn't supported without a build step) ----------------------
   sm: 480px   tablet-ish phones / large phones
   md: 768px   tablet portrait
   lg: 1024px  tablet landscape / small laptop
   xl: 1280px  desktop
---------------------------------------------------------------------------- */