/* ============================================================
   CLOCKWORK HEATING & AIR — DESIGN TOKENS
   Source of truth for the eventual WordPress + Bricks/ACSS build.
   Ported from the Figma comp (clockwork-air.com v2).
   Palette: maroon #901114 (primary) · teal #008eb2 (action) ·
            cream #ede9cd (accent) · ink #161616.
   Type scale is fluid clamp() in PX (ledger C1 — keeps the ACSS
   dashboard mapping a near-direct port; sidesteps the 62.5% rem trap).
   ============================================================ */
:root {
  /* ---- Brand ---- */
  --maroon:        #901114;
  --maroon-deep:   #720d10;
  --maroon-soft:   #b34b4d;
  --maroon-wash:   #f7ecec;

  --teal:          #008eb2;
  --teal-deep:     #00718f;
  --teal-light:    #60cee4;
  --teal-wash:     #e6f4f8;

  --cream:         #ede9cd;
  --cream-deep:    #e2dcb8;

  /* ---- Neutrals ---- */
  --ink:           #161616;
  --ink-2:         #1b1b1b;   /* dark sections / footer */
  --white:         #ffffff;
  --paper:         #f7f6f1;   /* off-white page sections */
  --line:          rgba(22, 22, 22, 0.12);
  --line-strong:   rgba(22, 22, 22, 0.20);

  /* ---- Text ---- */
  --text:          #161616;
  --text-muted:    rgba(22, 22, 22, 0.66);
  --text-on-dark:  #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.72);

  /* ---- Functional ---- */
  --star:          #f2be23;   /* review stars / gold */

  /* ---- Typography ---- */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-head: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale (px clamp) */
  --fs-hero:  clamp(42px, 1.4rem + 3.4vw, 76px);
  --fs-h1:    clamp(32px, 1.5rem + 1.9vw, 48px);
  --fs-h2:    clamp(27px, 1.4rem + 1.3vw, 40px);
  --fs-h3:    clamp(20px, 1.1rem + 0.5vw, 24px);
  --fs-h4:    clamp(17px, 1rem + 0.2vw, 19px);
  --fs-lead:  clamp(17px, 1rem + 0.25vw, 19px);
  --fs-body:  16px;
  --fs-sm:    14px;
  --fs-xs:    13px;
  --fs-eyebrow: 14px;

  --lh-tight:  1.1;
  --lh-head:   1.18;
  --lh-body:   1.6;

  /* ---- Layout ---- */
  --container:  1340px;
  --container-narrow: 880px;
  --gutter:     clamp(20px, 5.2vw, 140px);
  --section-y:  clamp(56px, 7vw, 104px);
  --section-y-sm: clamp(40px, 5vw, 72px);

  /* ---- Radii ---- */
  --r-btn:   6px;
  --r-card:  20px;
  --r-sm:    8px;
  --r-pill:  50px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 2px 8px rgba(22, 22, 22, 0.06);
  --shadow-md:  0 14px 36px rgba(22, 22, 22, 0.10);
  --shadow-lg:  0 26px 60px rgba(22, 22, 22, 0.16);
  --shadow-card: 0 18px 44px rgba(22, 22, 22, 0.12);

  /* ---- Depth / texture (v2 elevation) ---- */
  --grad-stage: radial-gradient(120% 90% at 78% 8%, rgba(0,142,178,0.22), transparent 52%),
                radial-gradient(90% 80% at 10% 100%, rgba(144,17,20,0.30), transparent 55%),
                linear-gradient(180deg, #161616, #1b1b1b);
  --grad-teal:  linear-gradient(135deg, #00a6cf, #00718f);
  --grad-maroon:linear-gradient(135deg, #a8161a, #720d10);
  --glow-teal:  0 0 0 1px rgba(96,206,228,0.25), 0 18px 50px rgba(0,142,178,0.35);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* ---- Motion ---- */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur:   0.5s;

  /* ---- Z ---- */
  --z-header: 100;
  --z-mobilecta: 90;
  --z-flyout: 120;
}