/**
 * B Mundell Ltd — design tokens (Design System §2 + master-spec amendments)
 * Phase 3A: foundation only. All component styling lives in 04-components.css (later).
 */

:root {
  /* Colour */
  --colour-bg: #f5efe2;
  --colour-bg-deep: #1f3f26;
  --colour-bg-panel: #ffffff;
  --colour-brand: #2c5936;
  --colour-brand-deep: #1f3f26;
  --colour-accent: #d4a24c;
  --colour-signal: #b23a2a;
  --colour-text: #1c1c1c;
  --colour-text-muted: #3a3a3a;
  --colour-text-invert: #f5efe2;
  --colour-rule: #d9d2c2;
  --colour-rule-invert: #3a5c42;

  /* Typography — mobile-first (small value); desktop at lg */
  --font-display-1: 40px;
  --font-display-2: 32px;
  --font-h1: 28px;
  --font-h2: 22px;
  --font-h3: 18px;
  --font-body-lg: 18px;
  --font-body: 16px;
  --font-body-sm: 14px;
  --font-eyebrow: 12px;
  --font-stat: 56px;
  --font-stat-text: clamp(1.5rem, 1.2rem + 1.5vw, 1.75rem);
  --font-editorial: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --font-label: 13px;
  --font-display-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-sans-family: "Source Sans 3", system-ui, sans-serif;

  /* Photography (paths relative to css/) — swap URLs to change bands */
  --img-hero: url("../img/going over a bridge.jpg");
  --img-break-operations: url("../img/tanker on the road.jpg");
  --img-break-team: url("../img/barrels of whisky.jpeg");
  /* Spare: 2 lorries.jpg, two lorries.jpg, b_mundell_ltd___glasgow_islay_services_cover.jpeg,
     truck image by water.jpeg, unloading from depot.webp, granny mundell.jpeg, tanker.jpg, 1 lorry.jpg */

  /* Opacity */
  --opacity-muted: 0.85;
  --opacity-faint: 0.6;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* Layout */
  --container: 1240px;
  --container-narrow: 780px;
  --container-reading: 580px;
  --gutter-mobile: 20px;
  --gutter-desktop: 40px;
  --columns: 12;
  --gap: 24px;
  --header-height-desktop: 72px;
  --header-height-mobile: 56px;
  --size-monogram-nav: 40px;
  --size-monogram-placeholder: 96px;

  /* Full-bleed photography bands */
  --visual-break-height: clamp(24rem, 65vh, 42rem);

  /* Radius & elevation */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --shadow-1: 0 1px 2px rgba(28, 28, 28, 0.06);
  --shadow-2: 0 4px 16px rgba(28, 28, 28, 0.08);

  /* Borders */
  --border-hair: 1px solid var(--colour-rule);
  --border-rule: 2px solid var(--colour-accent);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 480ms;

  /* Breakpoints (reference — use literal px in @media to match) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

@media (min-width: 1024px) {
  :root {
    --font-display-1: 72px;
    --font-display-2: 56px;
    --font-h1: 40px;
    --font-h2: 28px;
    --font-h3: 20px;
    --font-body-lg: 20px;
    --font-body: 17px;
    --font-body-sm: 15px;
    --font-eyebrow: 13px;
    --font-stat: 96px;
    --visual-break-height: clamp(36rem, 80vh, 60rem);
  }
}