/* ============================================================
   MASTERCRAFT CONSTRUCTION — Design Token System
   "Rugged Industrial" — Light Body / Dark Chrome
   Mobile-First | CSS3 | A11y | Performance-Optimized
   ============================================================ */

:root {
  /* ── Dark chrome palette (nav, hero, footer, dark sections) */
  --clr-void:        #0d0f0e;
  --clr-surface:     #141714;
  --clr-surface-2:   #1c1f1c;
  --clr-border-dark: #2a2e2a;
  --clr-white:       #f4f7f0;
  --clr-muted-dark:  #b4bab2;
  --clr-concrete:    #3a3f3a;

  /* ── Light body palette (main content sections) ─────────── */
  --clr-light-bg:      #f5f4f0;
  --clr-light-surface: #ffffff;
  --clr-light-raised:  #edecea;
  --clr-border-light:  #dddbd6;
  --clr-light-text:    #1a1c1a;
  --clr-light-muted:   #5c6159;
  --clr-light-strong:  #0d0f0e;

  /* ── Semantic tokens — default to LIGHT ─────────────────── */
  --clr-bg:     var(--clr-light-bg);
  --clr-card:   var(--clr-light-surface);
  --clr-border: var(--clr-border-light);
  --clr-text:   var(--clr-light-text);
  --clr-muted:  var(--clr-light-muted);
  --clr-strong: var(--clr-light-strong);

  /* ── Accent colors ──────────────────────────────────────── */
  --clr-lime:        #b8f000;
  --clr-lime-dim:    #94c200;
  --clr-lime-glow:   rgba(184,240,0,0.12);
  --clr-lime-ring:   rgba(184,240,0,0.18);   /* input focus ring      */
  --clr-lime-border:     rgba(184,240,0,0.3);   /* card hover borders    */
  --clr-lime-border-sm:  rgba(184,240,0,0.25);  /* subtle accent borders */
  --clr-lime-border-lg:  rgba(184,240,0,0.4);   /* stronger hover accent */
  --clr-orange:      #ff7a00;
  --clr-orange-dim:  #e06800;
  --clr-orange-glow: rgba(255,122,0,0.12);
  --clr-danger:      #c82000;
  --clr-danger-text: #ff6666;                   /* error text on dark    */
  --clr-danger-glow: rgba(255,68,68,0.08);      /* error field bg        */
  --clr-danger-ring: rgba(255,68,68,0.14);      /* error focus ring      */

  /* ── Citrus gradient system ─────────────────────────────── */
  --gradient-citrus:      linear-gradient(135deg, #ff7a00 0%, #ff9500 30%, #d4c800 70%, #b8f000 100%);
  --gradient-citrus-text: linear-gradient(90deg,  #ff7a00 0%, #ffb200 50%, #b8f000 100%);
  --gradient-citrus-glow: linear-gradient(135deg, rgba(255,122,0,0.15) 0%, rgba(184,240,0,0.15) 100%);

  /* ── Typography — font families ─────────────────────────── */
  --ff-display:   'Bebas Neue', 'Arial Narrow', sans-serif;
  --ff-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ff-body:      'Barlow', 'Helvetica Neue', sans-serif;

  /* ── Typography — fluid type scale (clamp: min, preferred, max)
     Formula: preferred = a_rem + b_vw where a is derived so the
     preferred value equals min exactly at 320px. The vw term drives
     fluid growth; clamp min/max are safety rails, not the scale itself.
     Min enforced at 320px. Floor raised to 0.85rem (xs) across the board.  */
  --fs-xs:   clamp(0.85rem,  0.8rem  + 0.25vw,  1rem);
  --fs-sm:   clamp(1rem,     0.925rem + 0.375vw, 1.125rem);
  --fs-base: clamp(1.125rem, 1.05rem + 0.375vw,  1.25rem);
  --fs-md:   clamp(1.25rem,  1.125rem + 0.625vw, 1.5rem);
  --fs-lg:   clamp(1.5rem,   1.225rem + 1.375vw, 1.875rem);
  --fs-xl:   clamp(2rem,     1.5rem  + 2.5vw,    2.625rem);
  --fs-2xl:  clamp(2.75rem,  1.75rem + 5vw,      4.125rem);
  --fs-3xl:  clamp(3.25rem,  1.75rem + 7.5vw,    7.125rem);
  --fs-hero: clamp(4rem,     1.5rem  + 12.5vw,   10.5rem);

  /* ── Typography — line-height scale ─────────────────────── */
  --lh-hero:    0.88;     /* stacked display hero, ultra-tight     */
  --lh-none:    1;        /* display headings, logos, icons        */
  --lh-tight:   1.15;     /* large section headings                */
  --lh-compact: 1.2;      /* condensed card titles                 */
  --lh-snug:    1.3;      /* subheadings, cards                    */
  --lh-normal:  1.5;      /* UI labels, nav, buttons               */
  --lh-relaxed: 1.65;     /* body copy default                     */
  --lh-loose:   1.7;      /* descriptive body, card text           */
  --lh-airy:    1.8;      /* long-form content, legal pages        */

  /* ── Typography — letter-spacing scale ──────────────────── */
  --ls-tight:   -0.01em;  /* large display type, tight tracking   */
  --ls-normal:   0;       /* body copy                            */
  --ls-wide:     0.04em;  /* subheadings, condensed titles        */
  --ls-wider:    0.08em;  /* tags, labels, small caps             */
  --ls-widest:   0.2em;   /* eyebrows, overlines, nav items       */
  --ls-ultra:    0.3em;   /* decorative uppercase labels          */

  /* ── Spacing ─────────────────────────────────────────────── */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;
  --sp-4:  1rem;     --sp-5:  1.25rem;  --sp-6:  1.5rem;
  --sp-8:  2rem;     --sp-10: 2.5rem;   --sp-12: 3rem;
  --sp-14: 3.5rem;   --sp-16: 4rem;     --sp-20: 5rem;
  --sp-24: 6rem;     --sp-32: 8rem;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max:  1200px;
  --container-wide: 1440px;
  --nav-height:     5rem;
  --radius-xs:      2px;
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      16px;
  --radius-pill:    2rem;

  /* ══════════════════════════════════════════════════════════
     UNIFIED RESPONSIVE SYSTEM
     ══════════════════════════════════════════════════════════
     Canonical breakpoints — the ONLY breakpoints used site-wide.
     CSS vars can't sit inside @media conditions, so these are the
     documented single source of truth; the responsive tokens below
     shift at exactly these widths in one central place, and every
     component references the tokens instead of writing its own
     media queries.
       --bp-xs   320px   (base, no media query needed)
       --bp-sm   480px
       --bp-md   640px
       --bp-lg   768px
       --bp-xl   1024px
       --bp-2xl  1280px
       --bp-3xl  1440px
     (Reference values — used by tooling/docs, not in @media.)     */
  --bp-sm:  480px;
  --bp-md:  640px;
  --bp-lg:  768px;
  --bp-xl:  1024px;
  --bp-2xl: 1280px;
  --bp-3xl: 1440px;

  /* Responsive design tokens — BASE (320px+) values.
     Redefined at breakpoints in the central layer (global.css).   */
  --container-px:  clamp(var(--sp-4), 4vw, var(--sp-6)); /* fluid side padding */
  --space-section: var(--sp-10);   /* section vertical rhythm  */
  --space-gap:     var(--sp-4);    /* standard grid / flow gap */
  --space-gap-lg:  var(--sp-8);    /* large layout gap         */
  --grid-min:      16rem;          /* min column width for auto-fit grids */

  /* ── Z-index scale ───────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-local:     1;   /* internal stacking within a component  */
  --z-overlay:  50;
  --z-nav:     100;
  --z-backdrop: 150;  /* above nav, below mobile panel         */
  --z-mobile:  200;   /* above everything including sticky nav */
  --z-scroll:  300;
  --z-skip:   9999;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.1);
  --shadow-lg:        0 8px 40px rgba(0,0,0,0.14);
  --shadow-lime:      0 0 24px rgba(184,240,0,0.25);
  --shadow-lime-lg:   0 0 48px rgba(184,240,0,0.18);
  --shadow-citrus:    0 0 24px rgba(184,240,0,0.2),  0 0 12px rgba(255,122,0,0.15);
  --shadow-citrus-lg: 0 0 48px rgba(184,240,0,0.15), 0 0 32px rgba(255,122,0,0.12);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --t-fast:  150ms;
  --t-base:  250ms;
  --t-med:   350ms;
  --t-slow:  400ms;
  --t-xslow: 700ms;
}

/* ══════════════════════════════════════════════════════════════
   CENTRAL RESPONSIVE LAYER
   The ONE place responsive spacing tokens change. Every component
   references these tokens, so the whole site's rhythm is controlled
   here. To retune the site's responsive spacing, edit only this block.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  :root {
    --space-section: var(--sp-12);
    --space-gap:     var(--sp-5);
  }
}
@media (min-width: 640px) {
  :root {
    --space-section: var(--sp-16);
    --space-gap:     var(--sp-6);
    --space-gap-lg:  var(--sp-10);
  }
}
@media (min-width: 768px) {
  :root {
    --space-section: var(--sp-24);
  }
}
@media (min-width: 1024px) {
  :root {
    --space-section: var(--sp-32);
    --space-gap-lg:  var(--sp-12);
  }
}

/* ── Dark context — flip semantic tokens ─────────────────────
   Scoped to specific components so descendant rules pick up
   dark values automatically without extra selectors.          */
.site-nav,
.hero,
.page-hero,
.trust-bar,
.site-footer,
.cta-banner,
.section--dark,
.section--void,
.section--surface,
.nav__mobile {
  --clr-bg:     var(--clr-void);
  --clr-card:   var(--clr-surface);
  --clr-border: var(--clr-border-dark);
  --clr-text:   var(--clr-white);
  --clr-muted:  var(--clr-muted-dark);
  --clr-strong: var(--clr-white);
}

/* ── Reduced Motion ──────────────────────────────────────────
   Kill animations but ALSO force animated elements visible so
   opacity:0 + animation:forwards doesn't leave content hidden. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
  /* Ensure reveal elements and hero animations aren't invisible */
  .reveal,
  .hero__eyebrow,
  .hero__heading,
  .hero__sub,
  .hero__actions,
  .hero__stats {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}