/* ==========================================================================
   Guerrero Construction Inc. — Design Tokens
   Tusk Creative Studios LLC · v1
   Authoritative source of every value on this site.
   Mirror of DESIGN_SYSTEM.md. Do not edit values here without editing that
   file too, and do not introduce values that don't exist in this file.
   ========================================================================== */

:root {
  /* ---------- Color: dark world ---------- */
  --c-ink-900: #0A0B0D;   /* page canvas */
  --c-ink-800: #14161A;   /* cards, credential shelf, footer */
  --c-ink-700: #1D2126;   /* inputs, hover surfaces, FAQ open */
  --c-line-dark: #2A2F36; /* 1px hairline on dark */

  /* ---------- Color: light band ---------- */
  --c-bone: #F5F2EC;      /* Process band background */
  --c-bone-alt: #E9E4DA;  /* cards inside the light band */
  --c-line-light: #D6D0C4;

  /* ---------- Color: the one metal ---------- */
  --c-gold: #C9A227;      /* rules, primary button, active states */
  --c-gold-hi: #E3C05A;   /* hover, focus ring */
  --c-gold-deep: #7A5F10; /* gold TEXT on bone only — 5.41:1 */
  --c-gold-press: #A88420;

  /* ---------- Color: text ---------- */
  --c-text: #F5F2EC;            /* on ink-900 — 17.62:1 */
  --c-text-muted: #A8AEB8;      /* on ink-900 —  8.82:1 */
  --c-text-inv: #14161A;        /* on bone    — 17.00:1 */
  --c-text-inv-muted: #3D424B;  /* on bone    —  9.04:1 */

  /* ----------------------------------------------------------------------
     SEMANTIC SURFACE LAYER (v5)

     The signed agreement specifies "black and gold, clean and modern, matched
     to the Client's logo". It specifies the palette, not a dark background;
     "dark-dominant" was DESIGN.md's own reading. The site is now light by
     default with black bands used structurally, which keeps the contracted
     black-and-gold direction and is easier to read at length.

     Everything below is built from the palette already defined above — no new
     colour values. Put .band-dark on a section to flip it back to ink.
     -------------------------------------------------------------------- */
  --surface:      var(--c-bone);
  --surface-2:    #FFFFFF;
  --surface-3:    var(--c-bone-alt);
  --fg:           var(--c-text-inv);
  --fg-muted:     var(--c-text-inv-muted);
  --line:         var(--c-line-light);
  --accent-text:  var(--c-gold-deep);   /* gold that passes on light */
  --accent-graphic: var(--c-gold);      /* rules, dots, fills */
  --on-accent:    var(--c-ink-900);

  /* NOTE: --c-gold on --c-bone is 2.17:1 and FAILS.
     Gold on the light band is permitted for graphic elements only.
     Gold text on bone uses --c-gold-deep. */

  /* ---------- Typography ---------- */
  /* v2 — Fraunces was rejected by the client. DESIGN_SYSTEM.md §2 names
     Archivo Expanded against Archivo as the sanctioned runner-up: a single-
     family, fully industrial system. Display sets the width axis to 115%. */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* v4 — condensed, not expanded. Heavy condensed caps is the studio's
     construction display voice; expanded read closer to fashion editorial. */
  --wdth-display: 76;
  --wdth-heading: 79;
  --wdth-sub: 88;

  --t-display-xl: clamp(2.5rem, 5.2vw, 4.5rem);      /* v4 — caps condensed sets smaller */
  --t-display:    clamp(2.125rem, 4.2vw, 3.5rem);    /* v4 */
  --t-heading:    clamp(1.75rem, 2.9vw, 2.625rem);   /* v4 */
  --t-subheading: clamp(1.25rem, 1.8vw, 1.5rem);
  --t-lede:       clamp(1.125rem, 1.4vw, 1.3125rem);
  --t-body:       1.0625rem;
  --t-body-sm:    0.9375rem;
  --t-caption:    0.8125rem;
  --t-label:      0.75rem;   /* uppercase, 0.14em — buttons, shelf, form labels.
                                NOT an eyebrow. Never sits above a headline. */

  --lh-display-xl: 1.02;
  --lh-display: 1.06;
  --lh-heading: 1.12;
  --lh-subheading: 1.25;
  --lh-lede: 1.6;
  --lh-body: 1.65;

  --tr-display-xl: 0.005em;
  --tr-display: 0.005em;
  --tr-heading: 0.01em;
  --tr-subheading: -0.005em;
  --tr-label: 0.14em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;
  --s-section: clamp(3.5rem, 6.4vw, 6rem);  /* v4 — was 4.5/9vw/8.5, too airy */

  /* ---------- Radius ---------- */
  --r-none: 0;
  --r-md: 4px;      /* cards, inputs, buttons */
  --r-pill: 999px;  /* mobile call bar ONLY */

  /* ---------- Shadow (light band only) ---------- */
  --shadow-lift: 0 2px 4px rgba(10, 11, 13, 0.06),
                 0 12px 32px rgba(10, 11, 13, 0.10);

  /* ---------- Layout ---------- */
  --container: 1280px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --measure: 68ch;
  --util-h: 40px;
  --nav-h: 76px;
  --nav-h-mobile: 64px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-mid: 240ms;
  --dur-slow: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-mid: 0ms;
    --dur-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dark bands: hero, process, the closing CTA, and the footer. Same tokens,
   flipped, so every component inherits without knowing which band it is in. */
.band-dark {
  --surface:   var(--c-ink-900);
  --surface-2: var(--c-ink-800);
  --surface-3: var(--c-ink-700);
  --fg:        var(--c-text);
  --fg-muted:  var(--c-text-muted);
  --line:      var(--c-line-dark);
  --accent-text: var(--c-gold);
  --on-accent: var(--c-ink-900);
}