/* ============================================================
   LAKE EFFECT COATINGS — DESIGN TOKENS
   This file is the SPEC the /forge-html-convert step maps into ACSS.
   Keep it clean + semantic. Type scale authored as fluid px-clamp
   (FORGE ledger C1) so the ACSS-dashboard mapping is a direct port
   and the G3 62.5%-rem trap never fires.
   Palette sampled from the Figma target (mTwZhQ2vaeoHeoL0CFXHAC):
   white base + brand red + neutral charcoal (no amber).
   ============================================================ */
:root {
  /* ---- Brand color ---- */
  --red:            #C0272D;   /* primary brand red (Figma ≈ #CC2F34) */
  --red-dark:       #9B1F24;   /* hover / pressed */
  --red-light:      #E0383E;   /* highlights */
  --red-wash:       rgba(192, 39, 45, 0.08);
  --red-wash-2:     rgba(192, 39, 45, 0.14);

  /* ---- Ink / dark sections ---- */
  --ink:            #1C1C1C;   /* dark section + footer bg (Figma charcoal) */
  --ink-2:          #262626;   /* raised dark card */
  --ink-3:          #333333;   /* dark borders / hover */
  --ink-line:       rgba(255, 255, 255, 0.10);

  /* ---- Neutrals / light ---- */
  --white:          #FFFFFF;
  --paper:          #F6F6F4;   /* off-white section bg */
  --paper-2:        #ECECEA;   /* alt light bg */
  --line:           #E3E3E0;   /* light borders */
  --text:           #1C1C1C;   /* body text on light */
  --text-muted:     #5F6164;   /* secondary text */
  --text-invert:    #FFFFFF;   /* text on dark */
  --text-invert-mut:rgba(255, 255, 255, 0.72);

  /* ---- Accents ---- */
  --gold:           #C9A24B;   /* star ratings / premium accent */
  --green:          #1F9D62;   /* trust ticks */

  /* ---- Typography ---- */
  --font-display: 'Anton', 'Archivo', system-ui, sans-serif;   /* big punchy headlines */
  --font-head:    'Archivo', system-ui, -apple-system, sans-serif; /* sub-heads, card titles, UI */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --fw-body:    400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Fluid type scale — px clamp (min @360px → max @1440px) */
  --fs-eyebrow: 0.8125rem;                              /* 13px, letterspaced caps */
  --fs-sm:      clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
  --fs-base:    clamp(1rem,    0.96rem + 0.2vw,  1.0625rem);   /* 16→17 */
  --fs-lg:      clamp(1.125rem,1.05rem + 0.35vw, 1.3125rem);   /* 18→21 */
  --fs-h4:      clamp(1.25rem, 1.12rem + 0.6vw,  1.5rem);
  --fs-h3:      clamp(1.6rem,  1.3rem + 1.3vw,  2.4rem);
  --fs-h2:      clamp(2.4rem,  1.7rem + 3.0vw,  4.25rem);      /* punchy section titles */
  --fs-h1:      clamp(2.9rem,  1.9rem + 4.6vw,  5.75rem);      /* hero */
  --lh-tight:   0.95;
  --lh-snug:    1.18;
  --lh-body:    1.65;

  /* ---- Spacing scale ---- */
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;    --sp-7: 4rem;    --sp-8: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 4.5vw, 7rem);  /* vertical section rhythm */

  /* ---- Layout ---- */
  --container:  1240px;
  --container-narrow: 920px;
  --gutter:     clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --header-h:   84px;

  /* ---- Radius ---- */
  --r-sm: 6px;  --r: 10px;  --r-lg: 16px;  --r-xl: 24px;  --r-pill: 900px;

  /* ---- Shadows (neutral, soft) ---- */
  --shadow-sm: 0 1px 3px rgba(17, 17, 17, 0.08);
  --shadow-card: 0 1px 2px rgba(17,17,17,0.05), 0 18px 34px -18px rgba(17,17,17,0.28);
  --shadow:    0 8px 28px rgba(17, 17, 17, 0.10);
  --shadow-lg: 0 24px 60px rgba(17, 17, 17, 0.16);
  --shadow-red:0 16px 38px rgba(192, 39, 45, 0.28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.18s var(--ease);
  --t:      0.3s var(--ease);
}