/* ==========================================================================
   Gumbati Handyman & Plumbing Services — design tokens
   Layout concept: 12-column asymmetric grid (7/5 hero split, 5/7 story split),
   generous section rhythm, charcoal dominant with the logo's signal red used
   sparingly as the one bold accent. Single-theme light site.
   ========================================================================== */
:root {
  /* Color */
  --ink: #1b1b1f;          /* charcoal: text, dark bands, footer */
  --ink-2: #26262c;        /* raised dark surface */
  --ink-soft: #4a4a52;     /* secondary text on light */
  --steel: #8d9097;        /* hammer grey: captions, dividers */
  --paper: #f1f1ed;        /* page ground, warm grey (not cream) */
  --paper-2: #e6e5df;      /* panel / inset */
  --white: #ffffff;
  --red: #d2262c;          /* logo signal red: the accent */
  --red-ink: #a8161c;      /* pressed / hover */
  --red-on-dark: #f4777c;  /* accent text on charcoal/navy, passes 4.5:1 */
  --navy: #22304a;         /* team-shirt navy: support tone */
  --line: rgba(27, 27, 31, 0.14);
  --line-on-dark: rgba(255, 255, 255, 0.14);
  --fg-on-dark: #f1f1ed;
  --fg-on-dark-soft: rgba(241, 241, 237, 0.72);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.4rem + 2vw, 2.75rem);
  --step-4: clamp(2.4rem, 1.6rem + 4vw, 4.5rem);
  --step-5: clamp(2.9rem, 1.8rem + 5.5vw, 6rem);
  --step-h1: clamp(2.2rem, 1.5rem + 2.8vw, 3.75rem);  /* one H1 size for every page */
  --step-h2: clamp(1.9rem, 1.35rem + 2.2vw, 3.1rem);   /* section headings, always below the H1 */

  /* Space */
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1.25rem;
  --space-l: 2rem;
  --space-xl: 2.5rem;
  --section: clamp(2.75rem, 2rem + 3vw, 5rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 76rem;

  /* Shape & motion */
  --radius: 4px;
  --radius-l: 10px;
  --shadow: 0 1px 2px rgba(27, 27, 31, 0.06), 0 12px 32px -12px rgba(27, 27, 31, 0.25);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 160ms;
  --slow: 420ms;
}
