/* CopperCraft Heating & Cooling — Design Tokens
   Single source of truth (contracts/design-tokens.md). Implements the
   operator's brand board 1:1. No component may hardcode a visual value.
   Direction: "Copper & Cool" — expressive motion, 1.333 type scale. */

/* ---- Fonts: self-hosted per file-structure contract.
   NOTE: place woff2 files at site/assets/fonts/ (Poppins 400/500/600,
   Inter 400/500). Falls back to system sans until then. ---- */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('../assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../assets/fonts/inter-500.woff2') format('woff2');
}

:root {
  /* ===== Colors (required set) ===== */
  --color-primary:      #A05628;  /* Refined deep copper (AA action: white ~5.4:1).
                                     Browner/rosier than the old orange for a
                                     premium metallic read; sheen added via
                                     --gradient-copper + --sheen-soft below. */
  --color-primary-dark: #7E4520;  /* Deep copper — hover / copper text on light */
  --color-accent:       #23679D;  /* Cooling blue — trust / secondary */
  --color-bg:           #F7F5F1;  /* Warm off-white base */
  --color-surface:      #FFFFFF;  /* Card background */
  --color-text:         #17191B;  /* Near-black charcoal */
  --color-text-muted:   #616970;  /* Medium slate gray (AA on bg + surface) */
  --color-border:       #D9DEE2;  /* Light neutral gray */
  --color-success:      #157347;  /* Accessible green (white text AA) */
  --color-error:        #B42318;  /* Accessible red (white text AA) */

  /* ---- Brand-board extensions (project-specific; still tokens) ---- */
  --color-primary-vibrant: #B26A38; /* Bronzed copper — decorative only (fails text AA) */
  --color-primary-light: #E0A46A; /* Warm copper highlight (satin) */
  --color-accent-light:  #4CA6D8; /* Cool highlight / airflow */
  --color-accent-dark:   #123A5A; /* Deep navy */
  --color-bg-alt:        #EEF1F3; /* Secondary soft-cool bg */
  --color-dark-bg:       #111416; /* Cinematic dark section bg (scrub stages) */
  --color-dark-surface:  #1A2024; /* Elevated dark surface */
  --color-dark-text:     #F7F5F1; /* Light text on dark */
  --color-dark-text-muted:#AAB2B8;/* Muted text on dark */
  --gradient-cool:   linear-gradient(90deg, #23679D 0%, #4CA6D8 100%);

  /* ---- Section tone bands (contracts/design-tokens.md v1.2.0) ----
     Alternating section backgrounds sampled from the operator's equipment
     sticker — warmer/more copper-tinted than --color-bg/--color-dark-bg,
     which stay neutral. Applied via .tone-cream / .tone-charcoal
     (site/shared/base.css), never hardcoded per-component. */
  --color-tone-cream:          #F1E9DE; /* Warm copper cream section bg */
  --color-tone-cream-surface:  #FBF6EE; /* Card surface on cream */
  --color-tone-cream-border:   #DCC9AE; /* Card border on cream */
  --color-tone-cream-muted:    #6B5D4D; /* Muted body text on cream */
  --color-tone-charcoal:         #16130F; /* Deep copper charcoal section bg */
  --color-tone-charcoal-surface: #221C16; /* Card surface on charcoal */
  --color-tone-charcoal-border:  #3A2E22; /* Card border on charcoal */
  --color-tone-charcoal-text:    #F3ECE2; /* Body text on charcoal */
  --color-tone-charcoal-muted:   #B9AC9B; /* Muted text on charcoal */

  /* ---- Header surfaces (contracts/design-tokens.md v1.3.0) ----
     The fixed bar tints to match the section under it: light surface over
     light content, dark surface over dark bands, fully transparent only
     over the hero. Translucent so the backdrop-blur reads. NOTE: the logo
     PNGs carry their own baked ink colours (gray #616970 for the dark
     variant, soft gray #D5DADE for the knockout) — CSS can't recolour a
     raster, so those live in the assets, not here. */
  --header-surface-light: rgba(247, 245, 241, .92); /* over light sections */
  --header-border-light:  var(--color-border);
  --header-surface-dark:  rgba(17, 20, 22, .82);    /* over dark sections */
  --header-border-dark:   rgba(255, 255, 255, .10);

  /* ---- Metallic copper (luxury sheen — reflective, restrained) ---- */
  --metal-copper-shade: #6B3A1B;  /* deep shadow of the curve */
  --metal-copper-core:  #A9662F;  /* mid copper body */
  --metal-copper-glow:  #E7B37B;  /* warm specular */
  --metal-copper-spec:  #F6DDBB;  /* champagne glint (used sparingly) */
  /* Curved reflective sweep: dark → body → bright specular → body → dark */
  --gradient-copper: linear-gradient(120deg,
      #6B3A1B 0%, #9A5A2A 22%, #C58A4E 44%,
      #F0CFA0 50%, #C58A4E 56%, #955327 78%, #7E4520 100%);
  /* Soft surface curvature overlay for buttons: top-left highlight → shade */
  --sheen-soft: linear-gradient(157deg,
      rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 30%,
      rgba(255,255,255,0) 46%, rgba(0,0,0,.14) 100%);
  /* Thin moving glint band (very subtle; motion-gated in CSS) */
  --sheen-sweep: linear-gradient(105deg,
      rgba(246,221,187,0) 40%, rgba(246,221,187,.55) 50%, rgba(246,221,187,0) 60%);
  /* Radial bead for small round marks (list dots, markers). A LINEAR sweep
     reads as a flat tint at 6px because the eye never sees the ramp; an
     off-centre radial highlight reads as a lit sphere at the same size. */
  --bead-copper: radial-gradient(circle at 32% 28%,
      #F6DDBB 0%, #E7B37B 34%, #A9662F 66%, #6B3A1B 100%);

  /* ===== Typography ===== */
  --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Modular scale, ratio 1.333 (expressive), 1rem base */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.333rem;  /* ~21px */
  --text-xl:   1.777rem;  /* ~28px */
  --text-2xl:  2.369rem;  /* ~38px */
  --text-3xl:  3.157rem;  /* ~51px */
  --text-hero: clamp(2.5rem, 6vw, 4.209rem); /* responsive hero (~40–67px) */

  --leading-tight:  1.12;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* ===== Spacing (4px base, brand-board 8pt steps) ===== */
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */

  /* ===== Layout ===== */
  --container-max: 1200px;
  --section-pad-y: clamp(3rem, 8vw, 6rem); /* 48–96px */
  --header-h:      4.75rem;  /* 76px — fixed transparent header; also drives
                                the mobile drawer offset + anchor scroll-margin */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;   /* brand-board extension */
  --radius-full: 999px;

  /* ===== Elevation (brand-board shadows) ===== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);

  /* ===== Motion ===== */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}