/* ══════════════════════════════════════════════════════════════════
   Executive Data Portfolio — main-site theme

   A foundation layer for the public-website pages
   (index, home, developer, project, developers, projects, dashboard).
   Loaded LAST in <head> so it wins the cascade on equal specificity
   over the per-page inline <style> blocks. Touches no markup — every
   refinement flows through (a) re-bound CSS custom properties the
   legacy stylesheets already consume, and (b) targeted overrides on
   the existing class names (.btn, .card, .topnav, .pill, .chip,
   .mode-btn, inputs).

   Scoped to the PUBLIC site only. LIA (/lia/*), OPR (/opr/*), PPM, CRM are
   independent design systems and untouched.

   Design tokens are from "Executive Data Portfolio / Pragmatic Luxury":
     • Cool neutral surface (#f9f9fa) with white elevated cards
     • Deep charcoal text (#1a1c1d) — AA/AAA against both surfaces
     • Rich Gold accent (#d4af37) reserved for primary actions only
     • Manrope across every text role, tabular-nums for figures
     • 8 px corner radius, hairline 1 px borders, subtle ambient shadow
   ══════════════════════════════════════════════════════════════════ */


/* ── Manrope ──────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");


/* ── Design tokens ────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --lux-bg:                  #f9f9fa;   /* page background */
  --lux-surface:             #ffffff;   /* primary card / panel */
  --lux-surface-soft:        #f3f3f4;   /* secondary card */
  --lux-surface-elevated:    #ffffff;   /* hover / focused card */
  --lux-surface-inverse:     #1a1c1d;   /* dark surfaces (top nav, CTAs) */

  /* Text */
  --lux-text:                #1a1c1d;   /* primary copy */
  --lux-text-strong:         #0a0c0d;   /* H1 / hero text */
  --lux-text-muted:          #4d4e51;   /* secondary copy */
  --lux-text-subtle:         #7f7e82;   /* labels, hints */
  --lux-text-inverse:        #f0f1f2;   /* text on dark surfaces */

  /* Lines & dividers — hairline, NEVER heavy */
  --lux-border:              #e2e2e3;   /* default hairline */
  --lux-border-strong:       #d0d0d1;   /* slightly more present */
  --lux-border-soft:         #ececed;   /* whisper-thin */

  /* Gold accent — used sparingly: primary CTA, active state, key highlight */
  --lux-gold:                #d4af37;   /* Rich Gold (primary accent) */
  --lux-gold-strong:         #735c00;   /* dark gold (text on gold, focus rings) */
  --lux-gold-soft:           #f7eed0;   /* gold tint background (hover wash) */
  --lux-gold-line:           #e9c349;   /* gold outline / underline */

  /* Status (used sparingly — financial gain/loss only) */
  --lux-success:             #157f4a;
  --lux-danger:              #ba1a1a;

  /* Shadows — ambient, large radius, low opacity */
  --lux-shadow-xs:           0 1px 0 rgba(15, 23, 42, 0.04);
  --lux-shadow-sm:           0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --lux-shadow-card:         0 4px 20px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04);
  --lux-shadow-lift:         0 10px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --lux-shadow-focus:        0 0 0 3px rgba(212, 175, 55, 0.28);

  /* Radii — 8 px is the standard; nested elements drop to 6 px */
  --lux-radius-sm:           4px;
  --lux-radius:              8px;
  --lux-radius-md:           10px;
  --lux-radius-lg:           14px;
  --lux-radius-pill:         9999px;

  /* Typography stack */
  --lux-font:                "Manrope", ui-sans-serif, system-ui, -apple-system,
                             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lux-font-numeric:        "Manrope", ui-sans-serif, system-ui, sans-serif;

  /* Re-bind the legacy variables the pages already consume so the new
     palette propagates without editing every inline style. Anywhere the
     existing CSS reads var(--bg) / var(--text-main) / var(--card-border)
     / var(--frame-border) / var(--launcher-gold), the new tokens flow
     through automatically. */
  --bg:                      var(--lux-bg);
  --text-main:               var(--lux-text);
  --card-border:             var(--lux-border);
  --frame-border:            var(--lux-border);
  --menu-surface:            var(--lux-surface);
  --menu-label:              var(--lux-text);
  --launcher-gold:           var(--lux-gold);
}


/* ── Base typography ──────────────────────────────────────────── */

/* Global font swap — Manrope replaces Arial/Helvetica everywhere on the
   public site. Specificity matches the inline `body { font-family: ... }`
   declarations and this file loads after them, so it wins the cascade. */
body {
  font-family: var(--lux-font);
  font-feature-settings: "ss01", "cv11";    /* slightly tighter, more refined glyphs */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--lux-text);
  background: var(--lux-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lux-font);
  font-weight: 700;
  letter-spacing: -0.015em;     /* tighter headings = more editorial */
  color: var(--lux-text-strong);
}

h1 { letter-spacing: -0.022em; }

/* Numeric data — tabular figures so columns line up cleanly. Applied
   wherever the page renders prices, areas, dates, percentages. */
.lux-num,
[data-numeric],
.price,
.area,
.metric,
.lia-her-count,
.map-layer-count,
.map-layer-group-count {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Uppercase micro-labels — used by .label, .kicker, small caps headers */
.label-md,
.kicker,
.eyebrow,
.solo-key {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lux-text-muted);
}


/* ── Buttons ──────────────────────────────────────────────────── */

/* Primary dark CTA — the workhorse on the public site. Charcoal fill,
   white text, 8 px radius, micro-shadow lift on hover. */
.btn,
.btn-dark {
  font-family: var(--lux-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 11px 18px;
  border-radius: var(--lux-radius);
  border: 1px solid var(--lux-surface-inverse);
  background: var(--lux-surface-inverse);
  color: var(--lux-text-inverse);
  box-shadow: var(--lux-shadow-sm);
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn:hover,
.btn-dark:hover {
  background: #0a0c0d;
  box-shadow: var(--lux-shadow-lift);
  transform: translateY(-1px);
}
.btn:focus-visible,
.btn-dark:focus-visible {
  outline: none;
  box-shadow: var(--lux-shadow-focus), var(--lux-shadow-sm);
}

/* Ghost / light button — secondary actions */
.btn-light,
.btn-ghost {
  font-family: var(--lux-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 11px 18px;
  border-radius: var(--lux-radius);
  border: 1px solid var(--lux-border);
  background: var(--lux-surface);
  color: var(--lux-text);
  box-shadow: var(--lux-shadow-sm);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn-light:hover,
.btn-ghost:hover {
  background: var(--lux-gold-soft);
  border-color: var(--lux-gold-line);
  color: var(--lux-gold-strong);
}
.btn-light:focus-visible,
.btn-ghost:focus-visible {
  outline: none;
  box-shadow: var(--lux-shadow-focus);
}

/* Gold accent button — used VERY sparingly for the single highest-value
   CTA on a page (e.g. "Generate Report", "Save Map", "Start"). Reach
   for .btn-dark first; .btn-gold is reserved for moments where you
   want to make a single action unmistakable. */
.btn-gold {
  font-family: var(--lux-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 11px 18px;
  border-radius: var(--lux-radius);
  border: 1px solid var(--lux-gold);
  background: var(--lux-gold);
  color: var(--lux-text-strong);
  box-shadow: var(--lux-shadow-sm);
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn-gold:hover {
  background: #c9a430;
  box-shadow: var(--lux-shadow-lift);
  transform: translateY(-1px);
}
.btn-gold:focus-visible {
  outline: none;
  box-shadow: var(--lux-shadow-focus), var(--lux-shadow-sm);
}


/* ── Pills (top-nav) ──────────────────────────────────────────── */

/* The .pill is shared between the dark glass top-nav (index.html /
   project.html) and a few inline filter chips. Refine without
   changing the existing fixed/positioning behavior. */
.pill {
  font-family: var(--lux-font);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border-radius: var(--lux-radius-pill);
  transition: background 160ms ease, color 160ms ease;
}
.pill.active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset;
}

/* Top-nav glass — kept dark but more refined. Tighter radius (matches
   the 8 px language) softened from full pill to the new 14 px curve. */
.topnav {
  border-radius: var(--lux-radius-lg);
  background: rgba(15, 17, 19, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.10) inset;
  border: 1px solid rgba(255, 255, 255, 0.08);
}


/* ── Chips (filter / status) ──────────────────────────────────── */

.chip {
  font-family: var(--lux-font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: var(--lux-radius-pill);
  background: var(--lux-surface-soft);
  color: var(--lux-text-muted);
  border: 1px solid transparent;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.chip:hover {
  background: var(--lux-surface);
  color: var(--lux-text);
  border-color: var(--lux-border);
}
.chip.active,
.chip.is-active {
  background: var(--lux-surface-inverse);
  color: #fff;
  box-shadow: var(--lux-shadow-sm);
  border-color: var(--lux-surface-inverse);
}


/* ── Mode tabs (project page media filter) ────────────────────── */

/* Already styled in project.html as a unified pill-bar; harmonize
   the tokens so it shares vocabulary with the rest of the site. */
body[data-page-type="project"] .mode-tabs {
  background: var(--lux-surface-soft);
  border-color: var(--lux-border-soft);
}
body[data-page-type="project"] .mode-btn {
  font-family: var(--lux-font);
  color: var(--lux-text-muted);
}
body[data-page-type="project"] .mode-btn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--lux-text-strong);
}
body[data-page-type="project"] .mode-btn.active,
body[data-page-type="project"] .mode-btn.active:hover {
  background: var(--lux-surface-inverse);
  color: #fff;
}


/* ── Cards ────────────────────────────────────────────────────── */

/* The gallery card. Replace the 2 px gray border with a hairline border
   + subtle ambient shadow on hover — the "tonal layer" language the
   design system describes. */
.card {
  background: var(--lux-surface);
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius-lg);
  box-shadow: var(--lux-shadow-card);
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.card:hover,
.card:focus-within {
  box-shadow: var(--lux-shadow-lift);
  border-color: var(--lux-border-strong);
  transform: translateY(-2px);
}

/* Solo / detail panels (project + developer detail pages) — same
   hairline + ambient shadow vocabulary, just bigger. */
body.is-solo .media-panels,
body.is-solo .solo-info {
  background: var(--lux-surface);
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius-lg);
  box-shadow: var(--lux-shadow-card);
}


/* ── Inputs ───────────────────────────────────────────────────── */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select {
  font-family: var(--lux-font);
  font-size: 14px;
  color: var(--lux-text);
  background: var(--lux-surface);
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius);
  padding: 10px 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--lux-gold);
  box-shadow: var(--lux-shadow-focus);
}
input::placeholder,
textarea::placeholder {
  color: var(--lux-text-subtle);
}


/* ── Section rhythm ───────────────────────────────────────────── */

/* The .section wrapper already caps at 1380 px (set in legacy-detail-
   pages.css). Lift the body background so cards visibly float on a
   neutral surface instead of pure white. Keep the gutter consistent
   on an 8-px baseline. */
body {
  background: var(--lux-bg);
}


/* ── Focus ring (global accessibility) ────────────────────────── */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--lux-shadow-focus);
  border-radius: var(--lux-radius);
}


/* ── Subtle motion — entrances & hovers ───────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .card,
  .btn,
  .btn-dark,
  .btn-light,
  .btn-ghost,
  .btn-gold,
  .chip,
  .pill {
    will-change: transform, box-shadow;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* ── Selection highlight ──────────────────────────────────────── */

::selection {
  background: var(--lux-gold-soft);
  color: var(--lux-gold-strong);
}


/* ══════════════════════════════════════════════════════════════════
   App launcher overlay (public-launcher.js + .launcher-overlay markup)
   Appears across every main-site page. The original radii were 30 px
   (panel) and 22 px (icon-box) — pull both into the 8 px family so
   the launcher reads as part of the same system. Replace heavy drop
   shadows with the tonal ambient pattern.
   ══════════════════════════════════════════════════════════════════ */

.launcher-overlay {
  background: rgba(15, 17, 19, 0.16);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

.launcher-panel {
  border-radius: var(--lux-radius-lg);
  background: var(--lux-surface);
  border: 1px solid var(--lux-border);
  box-shadow: var(--lux-shadow-lift);
}

.launcher-card {
  border-radius: var(--lux-radius-md);
  transition: background 180ms ease, transform 180ms ease;
}
.launcher-card:hover {
  background: var(--lux-gold-soft);
  transform: translateY(-2px);
}
.launcher-card:focus-visible {
  outline: none;
  background: var(--lux-gold-soft);
  box-shadow: var(--lux-shadow-focus);
}

.launcher-icon-box {
  border-radius: var(--lux-radius);
  background: var(--lux-surface);
  border: 1px solid var(--lux-border-soft);
  box-shadow: var(--lux-shadow-sm);
}

.launcher-card span {
  font-family: var(--lux-font);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--lux-text);
}

/* Three-dot menu trigger (top-right FAB across every main-site page).
   White surface with gold dots — the dot grid uses currentColor, so
   setting color: var(--lux-gold) propagates the gold to every dot. */
.menu-trigger {
  background: #ffffff;
  color: var(--lux-gold);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16), var(--lux-shadow-sm);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.menu-trigger:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22), var(--lux-shadow-sm);
}
.menu-trigger.is-open {
  background: #ffffff;
  color: var(--lux-gold);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18), var(--lux-shadow-sm);
}


/* ══════════════════════════════════════════════════════════════════
   Body-copy refinements — the inline page styles leave secondary
   paragraphs at #666 (warm mid-grey). Pull them into the system
   --lux-text-muted (cool deep grey) without page-by-page edits.
   ══════════════════════════════════════════════════════════════════ */

.home-copy p,
.section p,
.card p {
  color: var(--lux-text-muted);
  line-height: 1.65;
}

/* Hero copy — tighter h1 letter-spacing + weight rhythm for the
   editorial luxury feel. */
.home-copy h1 {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--lux-text-strong);
}

/* Hero image — gentler radius + hairline frame so it sits more like
   a print-portfolio plate than a banner. */
.home-hero-image {
  border-radius: var(--lux-radius-lg);
  border: 1px solid var(--lux-border);
  box-shadow: var(--lux-shadow-card);
}


/* ══════════════════════════════════════════════════════════════════
   Gallery cards (index.html / developers.html / projects.html)
   The .card class already got the hairline+shadow treatment above.
   Pull the inner media radius into the 14 px curve so it visually
   nests inside the 14 px card edge instead of fighting it.
   ══════════════════════════════════════════════════════════════════ */

.card-media,
.card .card-media,
.card img {
  border-radius: var(--lux-radius-md);
}

/* Filter / shop-head sticky bar — drop the harsh bottom border, lean
   on the tonal layer instead. */
.shop-head {
  background: var(--lux-bg);
  border-bottom: 1px solid var(--lux-border-soft);
}


/* ══════════════════════════════════════════════════════════════════
   Topnav — light variant on pages where the nav sits on a white
   background (developer.html, developers.html, projects.html). On
   those, the dark-glass treatment from the theme above looks
   disconnected. body[data-page-type] is unreliable here (not every
   page sets it); use the position of .topnav inside a .topnav-wrap
   that doesn't sit on the hero map. The default rule above handles
   the dark glass case; this override would need page-level opt-in
   if we wanted a light variant later. For now, leave the dark glass
   universal — it reads premium on every background.
   ══════════════════════════════════════════════════════════════════ */
