/* ============================================================
   BRACE AUTO PARTS — "Studio" design language (from the
   design-system handoff). Single source of truth for tokens.

   How a page adopts Studio:
     1. <link rel="stylesheet" href="/css/studio.css"> AFTER dist/tailwind.css
     2. <body class="studio ..."> (keep existing utility classes)
     3. Swap the top nav for the .studio-nav markup (see index.html)
     4. Fix page-specific inline <style> blocks + literal ALL-CAPS copy
   The .studio scope re-skins the legacy black+gold Tailwind utilities
   (incl. JS-injected markup) without touching page structure.
   ============================================================ */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/instrument-sans-var-latin.woff2') format('woff2');
}

:root {
  /* ---------- canvas (light studio) ---------- */
  --st-bg:        #f5f5f7;
  --st-bg-deep:   #ededf0;
  --st-panel:     #ffffff;
  --st-tile:      #f4f4f6;
  /* ---------- dark band (footer / contrast sections) ---------- */
  --st-ink-bg:    #0d0e10;
  --st-ink-bg-2:  #16171b;
  /* ---------- text ---------- */
  --st-ink:       #101114;
  --st-muted:     #75787f;
  --st-muted-2:   #9a9da3;
  --st-on-dark:   #f5f5f6;
  --st-muted-dark:#9ba0a8;
  /* ---------- signal (the only accent) ---------- */
  --st-verified:  #18c964;
  /* ---------- hairlines ---------- */
  --st-hair:        rgba(16,17,20,.1);
  --st-hair-strong: rgba(16,17,20,.22);
  --st-hair-dark:   rgba(255,255,255,.1);
  /* ---------- type / radii / motion ---------- */
  --st-font:   'Instrument Sans', 'Inter', sans-serif;
  --st-r-pill:  999px;
  --st-r-panel: 28px;
  --st-r-tile:  18px;
  --st-ease:    cubic-bezier(.4, 0, .2, 1);
  --st-shadow-sheet: 0 50px 110px -40px rgba(16,17,20,.35);
  --st-shadow-tile:  0 24px 60px -28px rgba(16,17,20,.25);
}

/* ============================================================
   PRIMITIVES (shared by all Studio pages)
   ============================================================ */
.st-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--st-r-pill); border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--st-font); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  background: var(--st-ink); color: #fff; padding: 12px 22px; white-space: nowrap;
  text-transform: none;
  transition: transform .16s var(--st-ease), opacity .16s var(--st-ease), border-color .16s var(--st-ease);
}
.st-pill:hover { opacity: .88; color: #fff; }
.st-pill:active { transform: scale(.97); }
.st-pill.ghost { background: transparent; color: var(--st-ink); border: 1px solid var(--st-hair); }
.st-pill.ghost:hover { border-color: var(--st-hair-strong); opacity: 1; color: var(--st-ink); }
.st-pill.inverse { background: #fff; color: var(--st-ink); }
.st-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--st-verified); }

/* ---- Top nav (Studio treatment, shared across converted pages) ---- */
.studio-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 48px;
  background: rgba(246,246,247,.78);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--st-hair);
  font-family: var(--st-font);
}
.studio-nav .st-wordmark {
  font-size: 21px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--st-ink); text-decoration: none;
}
.studio-nav .st-links { display: flex; gap: 36px; }
.studio-nav .st-links a {
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--st-ink); opacity: .72; text-decoration: none;
  transition: opacity .16s var(--st-ease);
  text-transform: none;
}
.studio-nav .st-links a:hover { opacity: 1; color: var(--st-ink); }
.st-nav-right { display: flex; align-items: center; gap: 12px; }
.studio-nav .st-pill { padding: 10px 20px; }
/* injected language switcher, restyled for the light nav (overrides its own
   appended stylesheet via higher selector specificity) */
nav.studio-nav .brace-language-switcher button {
  border: 1px solid var(--st-hair); border-radius: var(--st-r-pill);
  background: #fff; color: var(--st-ink); font-family: var(--st-font);
}
nav.studio-nav .brace-language-switcher button:hover,
nav.studio-nav .brace-language-switcher button[aria-expanded="true"] {
  border-color: var(--st-hair-strong); background: #fff; color: var(--st-ink);
}
nav.studio-nav .brace-language-panel {
  border: 1px solid var(--st-hair); border-radius: var(--st-r-tile);
  background: #fff; box-shadow: 0 18px 44px rgba(16,17,20,.18);
}
nav.studio-nav .brace-language-panel a { color: var(--st-muted); }
nav.studio-nav .brace-language-panel a:hover,
nav.studio-nav .brace-language-panel a[aria-current="true"] { background: var(--st-tile); color: var(--st-ink); }
nav.studio-nav .brace-language-panel .brace-language-native { color: var(--st-ink); }
nav.studio-nav .brace-language-panel .brace-language-code { color: var(--st-muted-2); }
@media (max-width: 980px) {
  .studio-nav .st-links { display: none; }
}
@media (max-width: 640px) {
  .studio-nav { padding: 16px 20px; }
}

/* ============================================================
   .studio SCOPE — re-skin legacy utilities (light inversion)
   ============================================================ */
body.studio {
  background: var(--st-bg);
  color: var(--st-ink);
  font-family: var(--st-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.studio ::selection { background: var(--st-ink); color: #fff; }

/* ---- surfaces: dark stack → light stack ---- */
.studio .bg-surface { background-color: var(--st-bg); }
.studio .bg-surface-container-lowest { background-color: var(--st-bg-deep); }
.studio .bg-surface-container-low { background-color: var(--st-panel); }
.studio .bg-surface-container { background-color: var(--st-panel); }
.studio .bg-surface-container-high { background-color: var(--st-tile); }
/* dark bands stay dark, but ink — not gold-tinted zinc */
.studio [class*="bg-zinc-950"] { background-color: var(--st-ink-bg); }
.studio [class*="bg-zinc-900"] { background-color: var(--st-ink-bg-2); }

/* ---- type families: one grotesk for everything ---- */
.studio .font-headline {
  font-family: var(--st-font);
  font-weight: 600;
  letter-spacing: -0.035em;
  text-transform: none;
}
.studio .font-body { font-family: var(--st-font); font-weight: 450; }
.studio .font-label {
  font-family: var(--st-font);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--st-muted);
}

/* ---- text colors: light-canvas mapping ---- */
.studio .text-on-surface { color: var(--st-ink); }
.studio .text-secondary { color: var(--st-ink); }            /* gold accents → ink */
.studio .text-on-secondary { color: #fff; }
.studio [class*="text-zinc-1"], .studio [class*="text-zinc-2"] { color: #3a3c41; }
.studio [class*="text-zinc-3"], .studio [class*="text-zinc-4"], .studio [class*="text-zinc-5"] { color: var(--st-muted); }
.studio [class*="text-zinc-6"], .studio [class*="text-zinc-7"] { color: var(--st-muted-2); }
.studio [class*="text-white"] { color: rgba(16,17,20,.05); }  /* watermark glyphs on light */
/* labels read muted even when they carried gold (rule order matters) */
.studio .font-label.text-secondary { color: var(--st-muted); }

/* ---- gold fills / borders → ink fills / hairlines ---- */
.studio .bg-secondary { background-color: var(--st-ink); }
.studio [class*="bg-secondary/"] { background-color: var(--st-hair); } /* gap-px hairline grids, tint chips */
.studio [class*="border-secondary"] { border-color: var(--st-hair); }
.studio [class*="border-zinc-8"] { border-color: var(--st-hair-dark); }
.studio [class*="hover:border-secondary"]:hover { border-color: var(--st-hair-strong); }
.studio [class*="hover:text-secondary"]:hover,
.studio [class*="hover:text-amber-4"]:hover { color: var(--st-ink); }
.studio [class*="hover:bg-secondary"]:hover { background-color: var(--st-ink); color: #fff; }
.studio .brass-glow { box-shadow: none; }
.studio .metallic-gradient { background: var(--st-ink); }
/* gradient-clipped text (e.g. about "Jordan") — render as solid ink, not a void */
.studio .bg-clip-text.metallic-gradient,
.studio .text-transparent.metallic-gradient,
.studio .metallic-gradient.text-transparent {
  background: none;
  color: var(--st-ink);
  -webkit-text-fill-color: var(--st-ink);
}

/* ---- card shapes: sharp industrial → soft tiles (cards only, not sections) ---- */
.studio div[class~="bg-surface-container-low"],
.studio a[class~="bg-surface-container-low"],
.studio article[class~="bg-surface-container-low"],
.studio div[class~="bg-surface-container"] {
  border-radius: var(--st-r-tile);
  overflow: hidden;
}

/* ---- legacy gold-bordered CTA links → ghost pills ---- */
.studio a[class*="border-secondary"][class*="uppercase"] {
  border-radius: var(--st-r-pill);
  border: 1px solid var(--st-hair);
  color: var(--st-ink);
  font-family: var(--st-font); font-weight: 600; letter-spacing: -0.01em; text-transform: none;
  transition: border-color .16s var(--st-ease), opacity .16s var(--st-ease);
}
.studio a[class*="border-secondary"][class*="uppercase"]:hover {
  border-color: var(--st-hair-strong); background: transparent; color: var(--st-ink);
}
/* gold-filled CTA links → primary ink pills */
.studio a[class~="bg-secondary"], .studio a[class*="bg-secondary/"] {
  border-radius: var(--st-r-pill);
  background: var(--st-ink); color: #fff;
  font-family: var(--st-font); font-weight: 600; letter-spacing: -0.01em; text-transform: none;
}
.studio a[class~="bg-secondary"]:hover, .studio a[class*="bg-secondary/"]:hover {
  background: var(--st-ink); color: #fff; opacity: .88;
}

/* ---- light "studio glow" replaces legacy dark hero gradients ---- */
/* about.html "Meet Jordan" hero overlay + any from-background gradient layer */
.studio [class*="bg-gradient-to-br"][class*="from-background"],
.studio [class*="bg-gradient-to-b"][class*="from-background"],
.studio [class*="bg-gradient-to-r"][class*="from-background"] {
  background:
    radial-gradient(70% 55% at 72% 60%, #fff 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #f6f6f7, #ededf0) !important;
}
/* gold blur orbs in hero backgrounds become invisible on light canvas */
.studio [class*="bg-secondary/1"][class*="blur-"],
.studio [class*="bg-secondary/5"][class*="blur-"] { background-color: transparent; }

/* ---- the ONE accent: keep verified green only as the dot, never as fills ---- */
.studio .dot-verified, .studio .st-dot,
.studio [class*="bg-green"], .studio .bg-secondary.rounded-full,
.studio span.bg-secondary[class*="rounded-full"] { background-color: var(--st-verified); }

/* ============================================================
   DARK CONTEXTS that stay dark (bands, photo overlays, footer)
   ============================================================ */
/* dark band sections (e.g. market routing): light text inside */
.studio [class*="bg-zinc-950"] h1, .studio [class*="bg-zinc-950"] h2,
.studio [class*="bg-zinc-950"] h3, .studio [class*="bg-zinc-950"] p,
.studio [class*="bg-zinc-950"] .text-secondary { color: var(--st-on-dark); }
.studio [class*="bg-zinc-950"] [class*="text-zinc-"] { color: var(--st-muted-dark); }
.studio [class*="bg-zinc-950"] .font-label { color: var(--st-muted-dark); }
/* …except inside white cards nested in the band */
.studio [class*="bg-zinc-950"] [class*="bg-surface-container"] h2,
.studio [class*="bg-zinc-950"] [class*="bg-surface-container"] h3,
.studio [class*="bg-zinc-950"] [class*="bg-surface-container"] p,
.studio [class*="bg-zinc-950"] [class*="bg-surface-container"] .text-secondary { color: var(--st-ink); }
.studio [class*="bg-zinc-950"] [class*="bg-surface-container"] [class*="text-zinc-"] { color: var(--st-muted); }
.studio [class*="bg-zinc-950"] [class*="bg-surface-container"] .font-label { color: var(--st-muted); }

/* photo-overlay plates (.absolute.bottom-0.left-0.right-0 over images) */
.studio .absolute.bottom-0.left-0.right-0 h2,
.studio .absolute.bottom-0.left-0.right-0 h3,
.studio .absolute.bottom-0.left-0.right-0 h4,
.studio .absolute.bottom-0.left-0.right-0 .text-secondary { color: var(--st-on-dark); }
.studio .absolute.bottom-0.left-0.right-0 [class*="text-zinc-"] { color: #c9ccd2; }
.studio .absolute.bottom-0.left-0.right-0 .font-label { color: #c9ccd2; }
/* ink badges floating on photos (bg-zinc-950/90 chips) */
.studio [class*="bg-zinc-950"][class*="backdrop-blur"],
.studio [class*="bg-zinc-950"][class*="px-3"] { border-radius: var(--st-r-pill); }

/* footer = ink band */
.studio footer h1, .studio footer h2, .studio footer h3, .studio footer p { color: var(--st-on-dark); }
.studio footer [class*="text-zinc-"] { color: var(--st-muted-dark); }
.studio footer a[class*="text-zinc-"]:hover { color: var(--st-on-dark); }
.studio footer [class*="border-zinc-8"] { border-color: var(--st-hair-dark); border-radius: var(--st-r-pill); }
.studio footer .bg-secondary { background-color: var(--st-verified); }

/* ============================================================
   quote.html form controls — dark gold fields → light studio fields
   (src/input.css sets these with !important, so override at higher
   specificity + !important; .studio .quote-form = 0,3,0 wins)
   ============================================================ */
.studio .quote-form input,
.studio .quote-form textarea,
.studio .quote-form select {
  background-color: var(--st-bg) !important;
  border: 1px solid var(--st-hair) !important;
  border-radius: 12px !important;
  color: var(--st-ink) !important;
  font-family: var(--st-font) !important;
}
.studio .quote-form input::placeholder,
.studio .quote-form textarea::placeholder { color: var(--st-muted-2); }
.studio .quote-form input:focus,
.studio .quote-form textarea:focus,
.studio .quote-form select:focus {
  border-color: var(--st-ink) !important;
  box-shadow: 0 0 0 1px var(--st-hair-strong) !important;
}
.studio .quote-form label { color: var(--st-muted); font-family: var(--st-font); }
.studio .quote-form label .req { color: var(--st-ink); }
