/* FirmEdge Portal — Design System CSS
 * Ported from redesign_v2/redesign/styles.css (Local-Dev-Server-1).
 * Tokens canonical in redesign_v2/colors_and_type.css.
 * Scope: structural layout (nav, sidebar, footer) + base typography + buttons.
 * Page-specific component CSS lives in per-page stylesheets.
 */

/* ── FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,700&family=Lato:wght@300;400;700;900&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────── */
:root {
  /* Navy scale */
  --bg:           #0a1628;
  --bg-card:      #112240;
  --bg-elevated:  #1a2d4d;
  --navy:         #0a1628;
  --navy-light:   #112240;

  /* Gold — primary brand accent */
  --gold:              #c9a84c;
  --gold-hover:        #e2c06e;
  --gold-light:        #e2c06e;
  --gold-soft:         rgba(201,168,76,0.12);
  --border-gold:       rgba(201,168,76,0.18);
  --gold-border:       rgba(201,168,76,0.18);
  --gold-border-strong:rgba(201,168,76,0.35);

  /* Foreground */
  --text:         #f0f2f8;
  --white:        #f0f2f8;
  --text-muted:   #8892a4;
  --text-dim:     #5a6578;
  --gray:         #8892a4;
  --gray-light:   #ccd6f6;

  /* Borders */
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);

  /* Semantic */
  --green:  #4ade80;
  --red:    #f87171;
  --blue:   #60a5fa;
  --yellow: #fbbf24;

  /* Typography */
  --font-serif: 'EB Garamond','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --font-sans:  'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:  'SF Mono','Fira Code','Roboto Mono',Menlo,monospace;

  /* Type scale */
  --fs-display: clamp(2.4rem,5vw,3.8rem);
  --fs-h1:      clamp(2rem,4vw,3rem);
  --fs-h2:      clamp(1.8rem,3vw,2.6rem);
  --fs-h3:      1.2rem;
  --fs-body:    1rem;
  --fs-body-lg: 1.15rem;
  --fs-small:   0.88rem;
  --fs-micro:   0.75rem;

  /* Letter spacing */
  --ls-eyebrow: 0.15em;
  --ls-badge:   0.1em;
  --ls-heading: -0.5px;
  --ls-display: -1px;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.25;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-cta:       0 4px 24px rgba(201,168,76,0.35);
  --shadow-cta-hover: 0 8px 32px rgba(201,168,76,0.45);
  --shadow-card-lift: 0 8px 25px rgba(201,168,76,0.30);

  /* Hero gradients */
  --grad-hero-top:    radial-gradient(ellipse at 50% 0%,   rgba(201,168,76,0.08) 0%, transparent 65%);
  --grad-hero-bottom: radial-gradient(ellipse at 50% 100%, rgba(201,168,76,0.06) 0%, transparent 65%);
  --grad-gold-edge:   linear-gradient(90deg,#c9a84c,#f5d98b,#c9a84c);
  --grad-gold-soft:   linear-gradient(135deg,rgba(201,168,76,0.08) 0%,rgba(10,22,40,0) 100%);

  /* Portal nav height — used for page-top padding */
  --nav-h: 64px;

  /* Portal content shell width — the SINGLE cap for authenticated portal
     pages (responsive full-width app-shell, option c). Content fills the
     viewport up to this cap, then centers. ~1560 sits in the 1500–1600 band:
     full + used on a 27"/1440p without sprawling edge-to-edge, generous on
     1080p, and effectively edge-to-edge (minus gutters) on a 13" laptop.
     This replaces the old 1080 inner cap and unifies the legacy
     .po-page (1280) / .ma-page (1400) / .se-page (1200) widths. */
  --content-max: 1560px;

  /* Sidebar width */
  --sidebar-w: 240px;
}

/* ── LIGHT THEME ───────────────────────────────────────
 * Full token coverage so every component renders correctly when the
 * portal flips to light without per-component overrides for surfaces.
 *
 * Contrast targets (WCAG AA):
 *   - Body text  ≥ 4.5:1 on --bg
 *   - UI controls ≥ 3:1 on --bg
 *
 * Verified ratios on --bg #f4efe6 (sRGB→linear via WCAG formula):
 *   --text       #1a2642 → 12.5:1   AAA
 *   --gray-light #2a3456 →  9.9:1   AAA
 *   --text-muted #4a5170 →  7.0:1   AAA
 *   --text-dim   #5a6578 →  5.1:1   AA (was #8c93a5 → 2.6:1 AA fail)
 *   --gold       #7a6322 →  5.0:1   AA Normal text
 *                          (deepened from spec'd #a88a30 / 3.0:1; cascades
 *                           to all 324 `color: var(--gold)` rules so they
 *                           pass AA without per-rule overrides)
 *   #ffffff on --gold      →  5.8:1   AA  (white CTA ink on deeper gold)
 *
 * The previous block overrode 14 tokens and left the rest at dark-mode
 * defaults — leaking navy backgrounds, white-on-white borders, pastel
 * semantic colors that read at <2:1 on cream, and --text-dim at 2.6:1
 * (AA fail). This block replaces that with every dark-bg-coupled token.
 */
[data-theme="light"] {
  /* ── Surfaces — cream / paper / pure white ── */
  --bg:           #f4efe6;
  --bg-card:      #fbf7ef;
  --bg-elevated:  #ffffff;
  /* Navy aliases — components that read these directly as a "dark
     surface" need to fall through to the light page surface so they
     don't paint a navy block on cream. */
  --navy:         #f4efe6;
  --navy-light:   #fbf7ef;

  /* ── Text hierarchy on cream ── */
  --text:         #1a2642;
  --white:        #ffffff;
  --text-muted:   #4a5170;   /* 7.0:1 — body-secondary */
  --text-dim:     #5a6578;   /* 5.1:1 — was #8c93a5 (2.6:1 AA fail) */
  --gray:         #4a5170;
  --gray-light:   #2a3456;   /* 9.9:1 — used by .fe-lede */

  /* ── Borders ── */
  --border:        rgba(26,38,66,0.10);
  --border-strong: rgba(26,38,66,0.18);

  /* ── Gold — deeper "burnished" value for AA on cream.
     324 sites use `color: var(--gold)` (eyebrows, italic accents,
     active-nav, section marks, etc). The brand's mid-gold #c9a84c
     reads at 1.7:1 on cream and the originally-spec'd #a88a30 reads
     at 3.0:1 — both fail AA Normal text (4.5:1). #7a6322 hits 5.0:1
     and reads as a burnished editorial ink that suits the cream
     aesthetic. NOTE: this is a brand-impact change from the original
     #a88a30 spec — flagged for Edwin sign-off in the PR description.
     Backgrounds painted with var(--gold) inherit the deeper value;
     primary buttons compensate via [data-accent="gold"]+light setting
     --cta-ink to #ffffff (5.8:1 on the deeper gold). ── */
  --gold:               #7a6322;
  --gold-hover:         #5e4d1b;          /* darker on hover (cream theme) */
  --gold-light:         #a88a30;          /* mid-warm — used as accent stop in gradients */
  --gold-soft:          rgba(122,99,34,0.12);
  --gold-border:        rgba(122,99,34,0.32);
  --border-gold:        rgba(122,99,34,0.32);
  --gold-border-strong: rgba(122,99,34,0.55);

  /* ── Semantic — darker variants for AA on cream.
     Dark-mode pastels (#4ade80 / #f87171 / #60a5fa / #fbbf24) read at
     ~1.5:1–2.0:1 on cream, far below AA. These derived shades give
     ≥4.5:1 for text and pair with 10%-opacity backgrounds for badges. ── */
  --green:  #166534;   /* 6.23:1 — was #15803d (4.38:1, AA fail) */
  --red:    #b91c1c;   /* 5.4:1 */
  --blue:   #1d4ed8;   /* 5.85:1 */
  --yellow: #854d0e;   /* 5.98:1 — yellow-800; was #a16207 (4.20:1, AA fail) */

  /* ── Shadows ── */
  --shadow-cta:       0 4px 24px rgba(169,136,48,0.20);
  --shadow-cta-hover: 0 8px 32px rgba(169,136,48,0.32);
  --shadow-card-lift: 0 10px 30px rgba(26,38,66,0.08);

  /* ── Hero gradients — repaint navy refs to cream so the radial
     fades blend with the page surface instead of stamping a faint
     navy bloom on cream. ── */
  --grad-hero-top:    radial-gradient(ellipse at 50% 0%,   rgba(122,99,34,0.10) 0%, transparent 65%);
  --grad-hero-bottom: radial-gradient(ellipse at 50% 100%, rgba(122,99,34,0.08) 0%, transparent 65%);
  --grad-gold-soft:   linear-gradient(135deg, rgba(122,99,34,0.10) 0%, rgba(244,239,230,0) 100%);
  /* --grad-gold-edge has no theme-relative refs and stays the same. */
}

/* ── Light + gold accent — landing.html ships with data-accent="blue".
   The duo/blue accents already define their own light variants; gold
   needs explicit cta tokens. CTA ink is white (5.8:1 on the deepened
   --gold) rather than the dark-mode default of #0a1628 (3.1:1 — fails
   AA Normal). */
[data-theme="light"][data-accent="gold"] {
  --cta-bg:       var(--gold);
  --cta-bg-hover: var(--gold-hover);
  --cta-ink:      #ffffff;
}

/* ── ACCESSIBILITY UTILITIES ───────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--bg-elevated, #1a2d4d);
  color: var(--gold, #c9a84c);
  border: 2px solid var(--gold, #c9a84c);
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--bg); }
img,svg { display: block; max-width: 100%; }

/* ── TYPOGRAPHY UTILITIES ──────────────────────────── */
.fe-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.fe-display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.fe-display em, h1 em, h2 em { font-style: normal; color: var(--gold); }
.fe-lede {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--gray-light);
}
.fe-muted { color: var(--text-muted); }
.fe-dim   { color: var(--text-dim); }

/* ── BUTTONS ───────────────────────────────────────── */
.fe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, box-shadow .2s, border-color .15s, color .15s, transform .15s;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.fe-btn-primary {
  background: var(--cta-bg, var(--gold));
  color: var(--cta-ink, #0a1628);
  box-shadow: var(--shadow-cta);
}
.fe-btn-primary:hover {
  background: var(--cta-bg-hover, var(--gold-hover));
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-1px);
}
.fe-btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.fe-btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.fe-btn-sm {
  font-size: 13px;
  padding: 8px 16px;
}

/* ── NAV — marketing (fixed, transparent → scrolled blur) ── */
.fe-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 40px;
  height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .2s, -webkit-backdrop-filter .2s, backdrop-filter .2s, border-color .2s;
}
.fe-nav.scrolled {
  background: rgba(10,22,40,0.88);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom-color: var(--border);
}
[data-theme="light"] .fe-nav.scrolled {
  background: rgba(244,239,230,0.90);
}

/* ── NAV — portal variant (always opaque) ─────────── */
.fe-nav-portal {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  height: var(--nav-h);
  background: rgba(10,22,40,0.92);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .fe-nav-portal {
  background: rgba(244,239,230,0.92);
  border-bottom-color: var(--border);
}

/* Shared nav pieces */
.fe-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.fe-nav-monogram {
  width: 30px; height: 30px;
  background: var(--gold);
  color: #0a1628;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 4px;
  font-style: italic;
  font-size: 17px;
  font-weight: 600;
  flex-shrink: 0;
}
.fe-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
}
.fe-nav-links a {
  color: var(--text-muted);
  transition: color .15s;
}
.fe-nav-links a:hover,
.fe-nav-links a.fe-nav-active { color: var(--text); }
.fe-nav-links a.fe-nav-active {
  position: relative;
  color: var(--gold);
}
.fe-nav-links a.fe-nav-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -22px;
  height: 2px;
  background: var(--gold);
}
.fe-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.fe-nav-icon-btn {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition: color .15s, border-color .15s, background .15s;
}
.fe-nav-icon-btn:hover {
  color: var(--gold);
  border-color: var(--gold-border-strong);
  background: var(--gold-soft);
}
.fe-nav-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c94c4c;
  box-shadow: 0 0 0 2px var(--bg);
}
.fe-nav-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1px solid var(--gold-border-strong);
  color: var(--gold);
  display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── PORTAL LAYOUT — sidebar + main ───────────────── */
.fe-portal-shell {
  display: flex;
  min-height: 100vh;
  padding-top: var(--nav-h);
}

.fe-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  padding: 24px 0;
}
.fe-sidebar-section {
  padding: 0 16px;
  margin-bottom: 24px;
}
.fe-sidebar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 8px;
  margin-bottom: 6px;
}
.fe-sidebar-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fe-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.fe-sidebar-link:hover {
  background: var(--bg-elevated);
  color: var(--text);
}
.fe-sidebar-link.active {
  background: var(--gold-soft);
  color: var(--gold);
  font-weight: 700;
}
.fe-sidebar-link svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}
.fe-sidebar-link.active svg { opacity: 1; }

/* ── MAIN CONTENT AREA ─────────────────────────────── */
.fe-main {
  flex: 1;
  min-width: 0;
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.fe-main-inner {
  /* Single source of portal content width (option c — width HOLD released
     2026-05-27). Fill the available width up to --content-max, then center so
     it never sprawls on ultra-wide yet feels full, not a narrow column floating
     left. The design's .po-page/.ma-page are themselves responsive max-widths
     (1280/1400), NOT a hard canvas — we deliberately raise the cap here for
     real-monitor ergonomics and unify the per-page containers onto it below. */
  max-width: var(--content-max);
  width: 100%;
  margin-inline: auto;
}

/* Width unification — collapse the legacy per-page content containers onto the
   single shell cap WHEN they render inside the portal shell. Historically
   .po-page (1280) / .ma-page (1400) / .se-page (1200) each nested INSIDE
   .fe-main-inner and re-capped their pages at a narrower, inconsistent width,
   double-padding horizontally on top of .fe-main's 40px gutter. Deferring to
   the shell gives every portal page ONE responsive width. Scoped to
   .fe-portal-shell so the same classes on standalone design pages keep theirs. */
.fe-portal-shell :is(.po-page, .ma-page, .se-page) {
  max-width: none;
  margin-inline: 0;
  padding-left: 0;
  padding-right: 0;
}
.fe-page-header {
  margin-bottom: 32px;
}
.fe-page-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin-bottom: 6px;
}
.fe-page-sub {
  font-size: var(--fs-small);
  color: var(--text-muted);
  /* Reading-width cap: the subtitle is prose and renders on every portal
     page header. In the wider app-shell (option c) an uncapped line would run
     the full ~1560 — keep it to a comfortable measure (~70ch). Layout content
     (cards/grids/tables) still uses the full shell width; only running prose is
     constrained. */
  max-width: 70ch;
}

/* ── FOOTER ────────────────────────────────────────── */
.fe-footer {
  border-top: 1px solid var(--border);
  padding: 20px 40px;
  font-size: var(--fs-micro);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fe-footer-brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
}
.fe-footer-links {
  display: flex;
  gap: 20px;
  list-style: none;
}
.fe-footer-links a {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.fe-footer-links a:hover { color: var(--gold); }

/* ── CARD ──────────────────────────────────────────── */
.fe-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
}
.fe-card-gold {
  border-color: var(--gold-border);
}
.fe-card-elevated {
  background: var(--bg-elevated);
}

/* ── BADGES / STATUS CHIPS ─────────────────────────── */
.fe-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid var(--gold-border);
}
.fe-badge-green {
  background: rgba(74,222,128,0.10);
  color: var(--green);
  border-color: rgba(74,222,128,0.25);
}
.fe-badge-red {
  background: rgba(248,113,113,0.10);
  color: var(--red);
  border-color: rgba(248,113,113,0.25);
}
.fe-badge-blue {
  background: rgba(96,165,250,0.10);
  color: var(--blue);
  border-color: rgba(96,165,250,0.25);
}

/* ── FORM ELEMENTS ─────────────────────────────────── */
.fe-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.fe-input::placeholder { color: var(--text-dim); }
.fe-input:focus { border-color: var(--gold-border-strong); }
.fe-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

/* ── DIVIDER ───────────────────────────────────────── */
.fe-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

/* ── LIGHT THEME — COMPONENT OVERRIDES ─────────────────
 * Cases where the dark-mode rule's color choice doesn't survive a
 * token swap. The token-layer change (--gold → #7a6322 on light)
 * cascades into all 324 `color: var(--gold)` rules automatically,
 * so this block only patches the few classes that hardcode dark
 * values or whose pastel rgba backgrounds compute incorrectly on
 * the cream page surface.
 */

/* Nav monogram — `.fe-nav-monogram` hardcodes `color: #0a1628` (navy
   ink on dark-theme bright gold). On the deeper light-theme gold
   (#7a6322) navy text drops to 3.06:1 — fails AA Normal. White text
   reads at 5.36:1. */
[data-theme="light"] .fe-nav-monogram {
  color: #ffffff;
}

/* Badges — dark-mode rules use rgba(green/red/blue, 0.10) tint
   computed against a navy page surface; on cream the tint blends
   to a pale wash and the pastel #4ade80 / #f87171 / #60a5fa text
   reads at <2:1 (AA fail). Repaint with darker semantic colors
   (defined in the token block above) and matching tint backgrounds.

   Default `.fe-badge` (gold flavor): the tinted gold-soft bg blend
   on cream gives ~4.1:1 with --gold text. Bumping to --gold-hover
   (#5e4d1b) gets 6.0:1 — clears AA Normal for the small badge
   uppercase text. */
[data-theme="light"] .fe-badge {
  color: var(--gold-hover);
}
[data-theme="light"] .fe-badge-green {
  background: rgba(21,128,61,0.10);
  color: var(--green);
  border-color: rgba(21,128,61,0.30);
}
[data-theme="light"] .fe-badge-red {
  background: rgba(185,28,28,0.10);
  color: var(--red);
  border-color: rgba(185,28,28,0.30);
}
[data-theme="light"] .fe-badge-blue {
  background: rgba(29,78,216,0.10);
  color: var(--blue);
  border-color: rgba(29,78,216,0.30);
}

/* Selection highlight — dark-mode rule pairs gold bg + bg-color text
   ("invert"). On light that flips to gold-on-cream which reads as
   gold-on-gold (no contrast). Force navy ink on the gold highlight. */
[data-theme="light"] ::selection {
  background: var(--gold);
  color: #ffffff;
}

/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 900px) {
  .fe-sidebar {
    display: none;
  }
  .fe-main {
    padding: 24px 20px;
  }
  .fe-footer {
    padding: 16px 20px;
  }
  .fe-nav-links {
    display: none;
  }
}
@media (max-width: 600px) {
  .fe-nav-portal {
    padding: 0 16px;
  }
  .fe-main {
    padding: 20px 16px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   LUXURY ELEVATION LAYER — global primitives (Luxury-Elevation-1)
   Additive refinement pass over the editorial system. Token-driven,
   theme-aware, reduced-motion-safe. Component-level elevations live in
   redesign-pages.css (same layer name); this block holds only the
   primitives every surface shares: spacing scale, motion tokens,
   elevation shadows, the masthead hairline, focus/scrollbar/selection
   craft, and the primary-button sheen.
   Mirrored in DESIGN.md §13. Brand rules honored: gold as seasoning,
   gold/ink-tinted shadows (never black on dark), no new frosted glass.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Spacing scale — closes the DESIGN.md §11.1 gap. 4px base ramp that
     formalizes the px rhythm already in use (6·8·12·16·24·32·40·72 ≈
     steps 2/3/4/6/8/10/16). Adopt in new work; back-fill opportunistically. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-24: 96px;

  /* Motion — one luxury curve, three durations. Editorial restraint:
     decisive ease-out, no spring, no bounce. */
  --ease-lux: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.14s;
  --dur-med:  0.26s;
  --dur-slow: 0.45s;

  /* Layered elevation — dark theme: gold-tinted depth (brand rule:
     never plain black shadows on navy). e1 rest · e2 raised · e3 overlay. */
  --shadow-e1: 0 1px 2px rgba(201,168,76,0.06), 0 2px 8px rgba(0,0,0,0.35);
  --shadow-e2: 0 2px 4px rgba(201,168,76,0.08), 0 10px 28px rgba(0,0,0,0.45);
  --shadow-e3: 0 4px 8px rgba(201,168,76,0.10), 0 18px 48px rgba(0,0,0,0.55);
}

[data-theme="light"] {
  /* Light theme: ink-tinted depth (precedented by --shadow-card-lift's
     rgba(26,38,66,…) on cream). Soft, paper-on-desk stacking. */
  --shadow-e1: 0 1px 2px rgba(26,38,66,0.05), 0 2px 8px rgba(26,38,66,0.06);
  --shadow-e2: 0 2px 4px rgba(26,38,66,0.05), 0 10px 28px rgba(26,38,66,0.10);
  --shadow-e3: 0 4px 8px rgba(26,38,66,0.06), 0 18px 48px rgba(26,38,66,0.16);
}

/* ── Masthead hairline — the signature luxury detail. A 2px burnished
   gold rule pinned to the very top of every page, like the foil edge
   on a bound volume. Theme-invariant (--grad-gold-edge), inert to
   pointer events, above the fixed nav (z 100). ── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-gold-edge);
  z-index: 1000;
  pointer-events: none;
}

/* ── Focus craft — one visible, branded focus ring everywhere. Replaces
   the browser default with the gold-border-strong hairline + offset so
   keyboard users get a deliberate, premium affordance (WCAG 2.4.7). ── */
:focus-visible {
  outline: 2px solid var(--gold-border-strong);
  outline-offset: 2px;
}

/* ── Scrollbar craft (WebKit + Firefox) — thin, token-colored, quiet. ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--gold-border-strong); background-clip: padding-box; }

/* ── Primary button sheen — a 1px inner top highlight reads as machined
   metal rather than flat paint. Transition rides the lux curve. ── */
.fe-btn {
  transition: background var(--dur-fast) var(--ease-lux),
              box-shadow var(--dur-med) var(--ease-lux),
              border-color var(--dur-fast) var(--ease-lux),
              color var(--dur-fast) var(--ease-lux),
              transform var(--dur-fast) var(--ease-lux);
}
.fe-btn-primary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), var(--shadow-cta);
}
.fe-btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), var(--shadow-cta-hover);
}
.fe-btn-primary:active { transform: translateY(0); }

/* ── Card depth — cards rest on e1 and lift to e2 along the lux curve.
   Keeps the 18% gold-border signature; depth is added, not replaced. ── */
.fe-card {
  box-shadow: var(--shadow-e1);
  transition: box-shadow var(--dur-med) var(--ease-lux),
              border-color var(--dur-fast) var(--ease-lux),
              transform var(--dur-med) var(--ease-lux);
}

/* ── Portal page-enter — content rises 8px and settles once per load.
   Subtle enough to read as polish, not theater. Disabled wholesale for
   reduced-motion users below. ── */
@keyframes lux-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fe-main-inner {
  animation: lux-rise var(--dur-slow) var(--ease-lux) both;
}

/* ── Reduced motion: kill the entrance + collapse transitions. ── */
@media (prefers-reduced-motion: reduce) {
  .fe-main-inner { animation: none; }
  .fe-btn, .fe-card { transition: none; }
}