/* ==========================================================================
   AA IMPACT GARAGE DOORS - Concept B "Gulf Modern"
   design-system.css - tokens + base + primitives
   Every token traces to projects/aa-impact/brand-guidelines.json.
   Aesthetic: bright architectural editorial. ~70% warm bone/white,
   ~20% navy structure (one full-bleed navy band), ~10% champagne gold.
   ========================================================================== */

/* ---- Fonts (Google Fonts): Archivo Expanded (display, engineered-expanded),
   Archivo (labels/medium), IBM Plex Sans (body). Loaded in index.html head. --- */

:root {
  /* ---------- COLOR (brand-guidelines.json color_palette) ---------- */
  --navy:            #0C1E3E; /* AA Impact Navy - primary structure/headings */
  --navy-midnight:   #0A1220; /* Midnight Navy - dark envelope / footer */
  --navy-elevated:   #14233F; /* Elevated Navy Surface */
  --gold:            #C9A45C; /* Champagne Gold - the single accent (~10%) */
  --gold-warm:       #D8B673; /* Gold hover */
  --bone:            #F5F1E8; /* Warm Bone - dominant bright base */
  --near-white:      #EDEBE4; /* Near-White */
  --white:           #FFFFFF; /* Pure White */
  --graphite:        #2A2E37; /* Graphite - body text on light */
  --cool-gray:       #8A93A3; /* Cool Gray - secondary text */

  /* Derived tints (navy/gold at low alpha - for hairlines, washes, glows) */
  --gold-line:       rgba(201, 164, 92, 0.22);  /* hairline_border */
  --gold-line-2:     rgba(201, 164, 92, 0.45);
  --navy-line:       rgba(12, 30, 62, 0.14);
  --navy-line-2:     rgba(12, 30, 62, 0.28);
  --navy-wash:       rgba(12, 30, 62, 0.045);
  --bone-panel:      #EFEADD;  /* subtly deeper bone for tonal shifts */
  --bone-deep:       #E7E0D0;
  --ink-on-navy:     var(--near-white);
  --ink-soft:        rgba(237, 235, 228, 0.72); /* soft near-white on navy */

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Archivo Expanded", "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-label:   "Archivo", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  /* Type scale - editorial, tighter modular (Concept B). Hero >= 6rem per gate. */
  --text-hero:  clamp(3.25rem, 6.4vw, 6.5rem);   /* editorial hero headline */
  --text-h1:    clamp(2.9rem, 5.2vw, 5rem);
  --text-h2:    clamp(2.15rem, 3.6vw, 4rem);
  --text-h3:    clamp(1.4rem, 1.9vw, 2.25rem);
  --text-h4:    clamp(1.2rem, 1.4vw, 1.75rem);
  --text-lede:  clamp(1.12rem, 1.35vw, 1.5rem);
  --text-body:  1.0625rem;
  --text-sm:    0.9375rem;
  --text-label: 0.78rem;    /* uppercase tracked labels */
  --text-micro: 0.72rem;

  --lh-tight:   1.04;
  --lh-head:    1.12;
  --lh-body:    1.65;
  --ls-display: -0.022em;   /* tight tracking on large display */
  --ls-head:    -0.012em;
  --ls-label:   0.22em;     /* wide tracked labels */
  --ls-label-2: 0.34em;

  /* ---------- SPACING ---------- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 2.75rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;
  --space-cta-above: 4rem;   /* CTA isolation zone (>=64px) */

  --section-pad: clamp(5.5rem, 9vw, 9.5rem);
  --container:   1360px;
  --container-wide: 1560px;
  --gutter: clamp(1.5rem, 5vw, 6rem);   /* wide editorial margins */
  --grid-gap: 2.5rem;
  --card-pad: 2.25rem;

  /* ---------- RADIUS (restrained, architectural) ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-chip: 999px;

  /* ---------- SHADOWS (navy-tinted, never pure black) ---------- */
  --sh-sm: 0 1px 2px rgba(10, 18, 32, 0.10);
  --sh-md: 0 14px 34px -18px rgba(10, 18, 32, 0.30);
  --sh-lg: 0 40px 80px -32px rgba(10, 18, 32, 0.38);
  --sh-xl: 0 60px 120px -40px rgba(10, 18, 32, 0.45);
  --sh-gold: 0 10px 28px rgba(201, 164, 92, 0.24);   /* interactive/active only */
  --sh-inset-line: inset 0 0 0 1px var(--gold-line);

  /* ---------- MOTION (crisp, architectural - Concept B) ---------- */
  --ease-crisp: cubic-bezier(0.22, 1, 0.30, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --dur-fast: 220ms;
  --dur-mid:  340ms;
  --dur-slow: 520ms;

  /* ---------- Z ---------- */
  --z-header: 100;
  --z-overlay: 200;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--graphite);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   TYPOGRAPHY PRIMITIVES
   ========================================================================== */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--navy);
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}
.eyebrow--navy { color: var(--navy); }
.eyebrow--navy::before { background: var(--navy-line-2); }
.eyebrow--onnavy { color: var(--gold); }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--navy);
  text-wrap: balance;
}

.lede {
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--graphite);
  font-weight: 400;
}

.measure { max-width: 54ch; }
.measure-sm { max-width: 42ch; }

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--tight { max-width: 1120px; }

.section { padding-block: var(--section-pad); position: relative; }

/* Hairline rule utility (champagne) */
.hr-gold { height: 1px; background: var(--gold-line); border: 0; }
.rule-gold {
  width: 56px; height: 2px; background: var(--gold);
  display: block;
}

/* Numeral treatment (spec-sheet numerals) */
.numeral {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   BUTTONS (brand-guidelines.json web_specific.button_styles)
   ========================================================================== */
.btn {
  --_bg: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8125rem;              /* 13px */
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 1.05rem 2.1rem;
  border-radius: var(--r-sm);
  transition: transform var(--dur-fast) var(--ease-crisp),
              background-color var(--dur-fast) var(--ease-crisp),
              box-shadow var(--dur-fast) var(--ease-crisp),
              color var(--dur-fast) var(--ease-crisp),
              border-color var(--dur-fast) var(--ease-crisp);
  will-change: transform;
  white-space: nowrap;
}
.btn__arrow { transition: transform var(--dur-fast) var(--ease-crisp); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Primary - champagne gold on navy text */
.btn--primary {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, var(--sh-sm);
}
.btn--primary:hover {
  background: var(--gold-warm);
  transform: translateY(-2px);
  box-shadow: var(--sh-gold);
}

/* Outline - navy on light */
.btn--outline {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy-line-2);
}
.btn--outline:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  background: var(--navy);
  color: var(--near-white);
}

/* Secondary - on navy backgrounds (gold hairline, near-white text) */
.btn--ghost {
  background: transparent;
  color: var(--near-white);
  border: 1px solid var(--gold-line-2);
}
.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.btn--lg { padding: 1.2rem 2.5rem; font-size: 0.84rem; }
.btn--sm { padding: 0.8rem 1.4rem; font-size: 0.74rem; }

/* Text link with sliding champagne underline */
.link-gold {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  position: relative;
  padding-bottom: 4px;
}
.link-gold::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-crisp);
}
.link-gold:hover::after { transform: scaleX(1); }
.link-gold .btn__arrow { transition: transform var(--dur-fast) var(--ease-crisp); }
.link-gold:hover .btn__arrow { transform: translateX(4px); }
.link-gold--onnavy { color: var(--gold); }
.link-gold--onnavy::after { background: var(--gold); }

/* ==========================================================================
   REVEAL ANIMATION (crisp architectural). No-JS + reduced-motion => visible.
   JS adds .js-reveal to <html>; only then do items start hidden.
   ========================================================================== */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-crisp),
              transform var(--dur-slow) var(--ease-crisp);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: transform, opacity;
}
.js-reveal [data-reveal="left"]  { transform: translateX(-30px); }
.js-reveal [data-reveal="right"] { transform: translateX(30px); }
.js-reveal [data-reveal="scale"] { transform: scale(1.04); opacity: 0; }

[data-reveal].is-in {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }