/* Design tokens – values from the approved artboards in design/.
   Fluid sizes interpolate linearly between the 390 px and 1440 px artboards. */

:root {
  /* Colours */
  --black: #0B0B0C;
  --offwhite: #EDECE6;
  --card: #F8F7F2;
  --text-light: #F2F1EC;
  --muted-dark: #C9C9CE;
  --muted: #9A9AA0;
  --muted-light: #55554F;
  --line-dark: #2A2A2E;
  --line-dark-2: #34343A;
  --line-dark-3: #3A3A40;

  /* Accents: orange is the house colour (home, contact, footer); each topic has its
     own, distinct from it. All of them carry black text and read as text on black at
     >= 5.5:1. On off-white they stay decorative only (< 3:1). */
  --brand: #FF5B1F;
  --accent-dev: #A77BFF;
  --accent-aerials: #1FCB6E;
  --accent-layers: #FFC21A;
  --accent: var(--brand);

  /* Type */
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.75rem, 2.1rem + 2.667vw, 4.5rem);        /* 44 → 72 */
  --fs-h2: clamp(1.875rem, 1.55rem + 1.333vw, 2.75rem);     /* 30 → 44 */
  --fs-lead: clamp(1.0625rem, 0.993rem + 0.286vw, 1.25rem); /* 17 → 20 */
  --fs-body: 1rem;
  --fs-small: 0.9375rem;                                     /* 15 */
  --fs-label: clamp(0.75rem, 0.703rem + 0.19vw, 0.875rem);  /* 12 → 14 */

  /* Layout */
  --content-max: 1200px;
  --gutter: 20px;
  --header-h: 64px;
  --edge-h: clamp(2rem, 1.444rem + 2.286vw, 3.5rem);         /* 32 → 56 */
  --grid-size: 32px;
  --grid-line: rgba(255, 255, 255, 0.05);
  --section-pad-top: 16px;
  --section-pad-bottom: 56px;

  /* Controls */
  --tap: 44px;
  --btn-h: 54px;
  --border: 2px;
  --focus-ring: 3px solid var(--accent);
}

@media (min-width: 48rem) {
  :root {
    --gutter: 32px;
    --header-h: 96px;
    --grid-size: 48px;
    --btn-h: 56px;
    --section-pad-top: 24px;
    --section-pad-bottom: 96px;
  }
}

@media (min-width: 64rem) {
  :root {
    --gutter: 40px;
  }
}

/* Topic scopes: set on <body> via the page header `accent`, and on single elements
   (menu items, service cards, contact topic cards) that stand for one topic */
.accent-brand   { --accent: var(--brand); }
.accent-dev     { --accent: var(--accent-dev); }
.accent-aerials { --accent: var(--accent-aerials); }
.accent-layers  { --accent: var(--accent-layers); }