/* ════════════════════════════════════════════════════════
   A-Line Roof Restorations, Design Tokens
   Single source of truth for colour, type, spacing, etc.
   Loaded BEFORE style.css on every page.
   ════════════════════════════════════════════════════════ */

:root {
  /* ── Brand colours (derived from the A-Line logo: red + black/grey) ── */
  --clr-ink:        #21262b;   /* neutral charcoal, headings, footer, dark bands */
  --clr-brand:      #cc2127;   /* brand red, primary CTA / accent            */
  --clr-brand-dk:   #a4151b;   /* CTA hover (darker red)                      */
  --clr-bg:         #f7f5f2;   /* warm off-white page background               */
  --clr-surface:    #ffffff;   /* cards / panels                              */
  --clr-body:       #4d555c;   /* body text (neutral grey)                    */
  --clr-line:       #e6e2db;   /* borders / dividers                          */

  /* ── Derived tones (no new hues) ───────────── */
  --clr-brand-tint: #fbeaea;   /* faint red wash for alt sections             */
  --clr-brand-soft: #f0cdcd;   /* red border / icon backdrop                  */
  --clr-ink-soft:   #2d343a;   /* lifted ink for dark contrast bands          */
  --clr-ink-deep:   #181b1e;   /* deepest ink                                 */
  --clr-heading:    #21262b;   /* alias, headings                            */
  --clr-muted:      #6b727a;   /* muted text on light                         */
  --clr-on-dark:    #eef0f2;   /* body text on dark bands                     */
  --clr-on-dark-mut:#a8b0b8;   /* muted text on dark bands                    */

  /* ── State + accent ────────────────────────── */
  --clr-success:    #2f8f5b;
  --clr-error:      #c0392b;
  --clr-star:       #f4a93b;   /* review stars, warm amber, distinct from clay */

  /* ── Typography ────────────────────────────── */
  --font-head: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:    0.8125rem;  /* 13px */
  --fs-sm:    0.9375rem;  /* 15px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.375rem;   /* 22px */
  --fs-xl:    1.75rem;    /* 28px */
  --fs-2xl:   2.25rem;    /* 36px */
  --fs-3xl:   3rem;       /* 48px */
  --fs-4xl:   3.75rem;    /* 60px */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-body:   1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ── Spacing scale (4/8/16/24/32/48/64) ────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;   /* 64 + 32, large section rhythm */

  /* ── Radii ─────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ── Shadows ───────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(31, 41, 51, 0.06), 0 1px 2px rgba(31, 41, 51, 0.08);
  --shadow-md: 0 8px 24px rgba(31, 41, 51, 0.08), 0 2px 6px rgba(31, 41, 51, 0.05);
  --shadow-lg: 0 22px 50px rgba(31, 41, 51, 0.14), 0 6px 16px rgba(31, 41, 51, 0.08);
  --shadow-brand: 0 10px 24px rgba(204, 33, 39, 0.26);

  /* ── Layout ────────────────────────────────── */
  --maxw:        1200px;
  --maxw-narrow: 760px;
  --nav-h:       104px;

  /* ── Motion ────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:  0.18s;
  --t-base:  0.28s;
  --t-slow:  0.5s;
}