/* ===========================================================================
   Ariel Plumbers & Gas Fitters — design tokens
   Direction: "clean utility + warmth" for a GROWING owner-led gas specialist.
   Palette is built around the one thing this business owns: the blue of a gas
   flame. Charcoal carries the weight (reliability), bone keeps it warm and
   human, flame-blue does the pointing. Ember is a single warm "heat" accent,
   used only as decoration — never as text.
   These tokens are the surgical-update layer. All CSS reads from here.
   =========================================================================== */
:root {
  /* Typography */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --h1-weight: 800;
  --h1-size: clamp(2.4rem, 7vw, 4.6rem);
  --h2-weight: 750;
  --h2-size: clamp(1.85rem, 4.2vw, 3rem);
  --h3-weight: 700;
  --h3-size: clamp(1.25rem, 2.4vw, 1.6rem);
  --body-weight: 400;
  --body-size: clamp(1rem, 0.97rem + 0.2vw, 1.12rem);
  --lede-size: clamp(1.12rem, 1.05rem + 0.5vw, 1.4rem);
  --eyebrow-size: 0.8rem;

  --leading-tight: 1.04;
  --leading-snug: 1.22;
  --leading-body: 1.65;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.18em;

  /* Colour — temperature kept cool-charcoal + warm-bone, one saturated accent */
  --color-ink: #15171C;          /* near-black, slightly cool */
  --color-ink-muted: #4C515B;    /* AA on bone (~7:1) */
  --color-surface: #F5F1E8;      /* warm bone */
  --color-surface-2: #EBE5D7;    /* deeper warm panel */
  --color-surface-3: #E1DACA;    /* card / inset */
  --color-surface-dark: #15171C; /* charcoal sections */
  --color-surface-dark-2: #1E2128;

  --color-on-dark: #F5F1E8;
  --color-on-dark-muted: #B7BCC6; /* AA on charcoal */

  --color-accent: #1657B0;        /* flame-blue, deep — AA as text on bone */
  --color-accent-press: #0F4690;
  --color-accent-bright: #5499F2; /* flame-blue for use on charcoal */
  --color-ember: #D9772B;         /* warm heat accent — decoration only */

  --color-line: #D7CFBE;          /* hairlines on bone */
  --color-line-dark: #313641;     /* hairlines on charcoal */

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.75rem;
  --space-6: 3.5rem;
  --space-8: 5rem;
  --space-10: 7rem;
  --space-12: 9rem;
  --container-max: 1200px;
  --container-narrow: 760px;

  /* Radius */
  --radius-card: 14px;
  --radius-chip: 999px;
  --radius-input: 10px;

  /* Shadow — layered, not bootstrap-default */
  --shadow-card: 0 1px 2px rgba(21,23,28,0.06), 0 10px 30px -12px rgba(21,23,28,0.22);
  --shadow-lift: 0 2px 6px rgba(21,23,28,0.08), 0 22px 48px -18px rgba(21,23,28,0.34);

  /* Scrims for text-over-image readability (WCAG AA over photography) */
  --scrim-hero: linear-gradient(180deg, rgba(21,23,28,0.18) 0%, rgba(21,23,28,0.62) 100%);
  --scrim-band: linear-gradient(180deg, rgba(12,14,18,0.74) 0%, rgba(12,14,18,0.82) 100%);
  --scrim-card: linear-gradient(180deg, rgba(21,23,28,0) 38%, rgba(21,23,28,0.78) 100%);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}