/* ============================================================================
 * farr-dark.css — Sprint 72 dark theme overlay (Stitch v3 "Technical Blueprint")
 *
 * Loads AFTER farr-style.min.css. Three roles:
 *   1. Redefine the legacy CSS variables to Material Design 3 dark palette,
 *      so all existing var(--bg-primary) / var(--text-primary) / etc. rules
 *      in farr-style.css produce dark output without per-rule edits.
 *   2. Paint the technical-grid body background per Stitch v3 spec.
 *   3. Apply universal 0px border-radius, dark form chrome, print overrides.
 *
 * Per AD-35 / F-186 / F-187 / SPEC §4.12.
 * Governance: mobile-first per AD-19 / AD-20; all @media use min-width.
 * Audience: desktop is the LEAST-used experience — mobile QA is primary.
 * ========================================================================== */


/* ── 1. Color scheme + body base (mobile baseline) ────────────────────────── */

html.dark, html { color-scheme: dark; }

body {
  background-color: #000000;
  color: #afcbd6;
  font-family: 'Inter', sans-serif;
}


/* ── 2. Technical grid background (20px minor + 100px major) ──────────────── */

body.technical-grid {
  background-color: #000000;
  background-image:
    linear-gradient(rgba(128, 128, 128, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 128, 128, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
  background-attachment: fixed;
}

body.technical-grid::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(128, 128, 128, 0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 128, 128, 0.30) 1px, transparent 1px);
  background-size: 100px 100px;
  pointer-events: none;
  z-index: -1;
}


/* ── 3. Token aliases (bridge old vars to v3 palette) ─────────────────────── */
/* This is the load-bearing block. Every legacy farr-style.css rule referencing
 * any of these CSS variables now produces dark output via cascade resolution. */

:root {
  /* Surfaces */
  --bg-primary:     #000000;
  --bg-secondary:   #090909;
  --panel:          #0d0d0d;
  --bg-card:        #111111;
  --surface:        #090909;

  /* Text */
  --text-primary:   #dee3e6;
  --text-secondary: #c2c7ca;
  --text-muted:     #889398;

  /* Borders + accents */
  --border:         #42484a;
  --accent:         #f77600;
  --accent-soft:    rgba(247, 118, 0, 0.12);

  /* Legacy brand aliases — map old navy to v3 black */
  --farr-navy:      #000000;
  --farr-mid:       #0d0d0d;
  --farr-deep:      #0d0d0d;   /* was #00267F Pantone 280C — footer + cta-band + sim-viewport bg */
  --farr-dark:      #0d0d0d;   /* was #00267F — appears in misc inline rules; rebind for dark theme */
  --bg:             #000000;   /* was #f8f9fc (near-white) — Sprint 72 compliance audit caught this leak */

  /* Stitch direction tokens already exist in farr-style.css from Session 75:
   * --farr-night, --farr-night-2, --farr-night-3, --farr-mist, --farr-mist-dim
   * Kept as-is; they already align with v3. */

  /* Sprint 72 S5 — font token rebinding per Stitch v3 spec.
   * Every legacy rule using var(--font-heading) / var(--font-display) /
   * var(--font-body) automatically picks up Space Grotesk + Inter sitewide. */
  --font-heading: 'Space Grotesk', 'Jost', sans-serif;
  --font-display: 'Space Grotesk', 'Jost', sans-serif;
  --font-body:    'Inter', 'Kumbh Sans', sans-serif;
  /* --font-mono stays as-is (DM Mono) for tabular numerics */
}


/* ── 4. Universal 0px border-radius (brutalist Stitch v3) ─────────────────── */

.yacht-card, .news-card, .partner-card, .purchase-card, .availability-badge,
.btn-purchase, .btn-waitlist, .hero-cta, .hero-secondary,
.spec-table, .designer-comments, .tech-resources, .built-boats,
input, select, textarea, button, .video-embed-container, .yacht-detail-image,
.consulting-service-card, .news-card-image, .yacht-card-image,
.project-card-image, .campaign-quicklink-card, .campaign-quicklink-image,
.tech-res-card, .yacht-gallery-thumb, .gallery-thumb,
.media-frame, .media-frame--history, .purchase-card--waitlist {
  border-radius: 0 !important;
}

/* Exceptions: circular shapes for play triggers, filter pills, modal corner */
.yacht-gallery-filter-btn,
.nav-hamburger span,
.ce-savepill,
[class*="rounded-full"] { border-radius: 9999px !important; }


/* ── 5. Form controls (F-187) ─────────────────────────────────────────────── */

input, select, textarea {
  background-color: #111111;
  color: #dee3e6;
  border: 1px solid #42484a;
}

input::placeholder, textarea::placeholder { color: #889398; }

input:focus, select:focus, textarea:focus {
  outline: 1px solid #f77600;
  outline-offset: 1px;
}


/* ── 5b. Mobile nav drawer dark background (Sprint 72-DARK-NAV pre-launch) ─ */
/* farr-style.css:241 hardcodes background: rgba(255, 255, 255, 0.98) on
 * .nav-mobile — a raw rgba, not a CSS var — so the §3 token rebind cannot
 * reach it. Result: mobile hamburger drawer rendered near-white on dark
 * pages with grey-on-white text, barely readable.
 *
 * Mirrors the existing .homepage--studio .nav-mobile reference at
 * farr-style.css:1084. Sprint 72-DARK-S4 (Path B post-launch) will do the
 * full nav restyle (uppercase Space Grotesk + black/95 backdrop); this is
 * the minimum readability fix for pre-launch sign-off. */
.nav-mobile {
  background: rgba(8, 17, 22, 0.98);
}


/* ── 6. Material Symbols default variation ────────────────────────────────── */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


/* ── 6c. Partner card + tab inline-style overrides (Sprint 72-COMPL T1.2) ── */
/* partners.html has an inline <style> block with hardcoded light-theme
 * values (background:#fff, navy text). CSS in farr-dark.css loads after
 * the inline <style> per <head> order, so these rules win. */

body.technical-grid .partner-tab {
  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border);
}
body.technical-grid .partner-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}
body.technical-grid .partner-tab.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
body.technical-grid .logo-item {
  background: var(--surface);
  border-color: var(--border);
}
body.technical-grid .logo-item:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(247, 118, 0, 0.15);
}
body.technical-grid .logo-item span {
  color: var(--text-secondary);
}
body.technical-grid .section-heading {
  color: var(--text-primary);
}
body.technical-grid .partner-card {
  background: var(--surface);
  border-color: var(--border);
}
body.technical-grid .partner-card-logo-hero {
  background: var(--panel);   /* was --farr-deep #00267F via inline style */
}


/* ── 6d. Partner logo dark-mode rendering ───────────────────────────────── */
/* Removed 2026-05-21: a blanket filter:invert(1) brightness(.92) rule on
 * .logo-item img / .partner-card-logo / .partner-card-logo-hero img /
 * .yacht-builder-badge img (Sprint 72-COMPL T1.3 hack). The hack inverted
 * dark-on-transparent legacy logos so they'd show on dark theme, but it
 * also destroyed Britt-supplied white-on-transparent logos like Maxi
 * Dolphin (white -> black -> invisible on dark tile). Per CLAUDE.md
 * "specifically banned patterns: CSS filter: invert() as a substitute
 * for proper assets" -- the right fix is brand-supplied white variants
 * for the ~10 dark-dominant legacy logos (already in Britt's 74-D ask
 * #8 about partner logo sourcing strategy). White logos now render
 * natively on the dark .logo-item tile; brand-color logos render
 * brand-authentic (Britt's 5/20 "Why color changes on all logos?"
 * question answered by removing the filter that was causing the
 * apparent color changes); a few dark-on-transparent legacy logos may
 * appear faint until replaced. */


/* ── 6b. Service / consulting glyph color (Sprint 72 user q 2026-05-16) ──── */
/* The .consulting-service-card SVG glyphs hardcode stroke/fill="#00267F"
 * (Farr navy) which is invisible on the black dark theme. Per Stitch v3
 * DESIGN.md "Hull Steel — low-saturation, cool blue-grey used for primary
 * text and technical icons", swap to #afcbd6. CSS class selector specificity
 * (0,0,1,1) beats SVG presentation attribute specificity (0,0,0,0). */

.consulting-service-card svg [stroke="#00267F"] { stroke: #afcbd6; }
.consulting-service-card svg [fill="#00267F"]   { fill:   #afcbd6; }


/* ── 7. Logo color treatment ──────────────────────────────────────────────── */
/* Existing dark Farr wordmark SVG on nav appears as dark-on-dark = invisible.
 * Page-level override: when body has technical-grid (dark theme active),
 * use the white-transparent variant. Pages can opt to override per-element. */

body.technical-grid .nav-logo img[src*="farr-wordmark.svg"] {
  /* Quick-fix: invert until templates swap to farr-wordmark-white.png */
  filter: invert(1);
}


/* ── 8. Print media (F-187) ───────────────────────────────────────────────── */
/* Anyone printing a yacht detail page or design plan card on white paper
 * gets white-on-white = invisible without these overrides. */

@media print {
  body,
  body.technical-grid {
    background: #ffffff !important;
    color: #000000 !important;
  }
  body.technical-grid::before { display: none !important; }
  .yacht-card, .news-card, .purchase-card, .built-boats,
  .designer-comments, .tech-resources, .spec-table,
  .consulting-service-card {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
  }
  a { color: #000000 !important; text-decoration: underline; }
  .yacht-gallery, .yacht-renders, .nav-hamburger,
  .yacht-gallery-filter, .gallery-thumb, .btn-purchase, .btn-waitlist {
    display: none !important;
  }
}


/* ── 9. Studio home hero compression (Sprint 72 user request 2026-05-16) ──── */
/* Shrink the .studio-hero video box so the proof-band ("43 World Championships
 * 50+ Years / 800+ Designs / 2025 WSA Winner") lands above the fold on the
 * primary mobile viewport. Mobile-first per AD-19; mobile is primary per G-2.
 *
 * Refinement (same day): user reports excess vertical space between video box
 * and proof-band. Three tightenings:
 *   (a) hide the dev-only .studio-hero-note (internal copy, not public-facing)
 *   (b) collapse hero-shell bottom padding so hero content sits closer to bottom
 *   (c) tighten proof-band top padding so band sits closer to hero
 */

.studio-hero {
  min-height: 55vh;           /* mobile baseline: was 75vh */
  padding-top: 4.5rem;        /* was 5.5rem */
}
.studio-hero-shell {
  padding: 2.5rem 1.25rem 0.5rem;  /* was 4rem 2rem (uniform); bottom now 0.5rem */
}
.studio-hero-note {
  display: none;              /* internal build note — not public copy */
}
.studio-proof-grid {
  padding: 0.85rem 1.25rem;   /* was 1.5rem 2rem */
}
/* Compress the hero copy block's trailing margin */
.studio-hero-copy .action-row {
  margin-bottom: 0;
}


/* ── 10. Mobile-first responsive enhancements (min-width only) ────────────── */
/* Per AD-19 governance + AD-20 primitive contract. Desktop is least-used. */

/* Mobile baseline (< 561px): defaults above. */

/* Tablet (≥ 561px): slightly larger body text + softer grid */
@media (min-width: 561px) {
  body {
    font-size: 15px;
  }
  .studio-hero-shell {
    padding: 3rem 1.5rem 0.75rem;  /* bottom tightened */
  }
  .studio-proof-grid {
    padding: 1rem 1.5rem;
  }
}

/* Desktop (≥ 769px): only adds, never overrides mobile defaults */
@media (min-width: 769px) {
  body {
    font-size: 16px;
  }
  .studio-hero {
    min-height: max(440px, 60vh);  /* was max(640px, 80vh) */
  }
  .studio-hero-shell {
    padding: 4rem 2rem 1rem;       /* bottom 1rem (was 4rem) */
  }
  .studio-proof-grid {
    padding: 1.25rem 2rem;
  }
}