/* ==========================================================================
   fae-shell.css — Fae Intelligence shared brand shell (v2 "Spruce & Pearl")
   ==========================================================================
   Framework-neutral: no Tailwind, no external fonts, no JS required.
   Single source of truth for brand tokens + the shared header/footer shell.
   Written to be copy-pasted into the RCA tool's Flask templates unchanged —
   see SHELL-SPEC.md for the matching HTML snippets.

   v2 (2026-07-03, design-review): palette derived from the fae mark itself —
   spruce-teal ink (the figure), wing-aqua teal, warm pearl surfaces (the
   wings), brass kicker. Replaces the v1 Tailwind-default slate/cyan set.

   Contrast (WCAG 2.1, measured — see verification/a11y-contrast.md):
   - Body on light surfaces >= 8.5:1; links on light >= 5.5:1.
   - White on every band/button/gradient stop >= 6.3:1.
   - Light teal (--fae-teal-300) is for dark backgrounds only (>= 5.1:1).
   ========================================================================== */

:root {
  /* Ink — deep spruce-teal (the figure in the mark) */
  --fae-ink-950: #081d20; /* footer */
  --fae-ink-900: #0d3134; /* dark hero bands */
  --fae-ink-800: #14464a; /* surface/card on dark */
  --fae-ink-700: #1d5b60; /* hero gradient end */

  /* Teal — wing aqua, working range */
  --fae-teal-300: #7de3d8; /* accent text on dark */
  --fae-teal-500: #2fa79b; /* DECORATIVE ONLY: focus rings, hairlines, card rules */
  --fae-teal-700: #0c6b63; /* AA-safe links/buttons on light */
  --fae-teal-800: #094f49; /* hover on light */
  --fae-band:     #11565c; /* mid stop of the iridescent band gradient */

  /* Pearl surfaces (warm, replaces pure white/gray-50) */
  --fae-surface:     #fbfaf7;
  --fae-surface-alt: #f2efe9;
  --fae-card:        #ffffff;
  --fae-border:      #e2ddd3;

  /* Text */
  --fae-text:       #14262b;   /* headings on light — 14.99:1 on surface */
  --fae-text-muted: #35464c;   /* body on light — 9.44:1 on surface */
  --fae-text-on-dark: #ffffff;
  --fae-text-muted-on-dark: #c7d6d2; /* 9.28:1 on ink-900 */

  /* Warm counterpoint — eyebrows/kickers only, sparingly */
  --fae-brass-700: #715624;    /* 6.58:1 on surface */

  /* Type */
  --fae-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fae-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fae-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Layout */
  --fae-max-width: 72rem;
  --fae-touch-target: 44px;
}

/* --------------------------------------------------------------------------
   Reusable brand primitives
   -------------------------------------------------------------------------- */

/* Iridescent band — replaces flat teal fills. White text passes at every
   stop (13.94 / 8.37 / 7.73). */
.fae-band-iridescent {
  background: linear-gradient(135deg, var(--fae-ink-900) 0%, var(--fae-band) 55%, var(--fae-ink-700) 100%);
  color: var(--fae-text-on-dark);
}

/* Card: hairline + teal top rule instead of drop shadows */
.fae-card-rule {
  background: var(--fae-card);
  border: 1px solid var(--fae-border);
  border-top: 2px solid var(--fae-teal-500);
  border-radius: 0.5rem;
}

/* Eyebrow/kicker: mono, tracked, uppercase. Color set contextually
   (brass on light, teal-300 or white on dark). */
.fae-eyebrow {
  font-family: var(--fae-font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Teal list markers for styled fact lists */
.fae-list li::marker { color: var(--fae-teal-700); }

/* --------------------------------------------------------------------------
   Shared header — light variant (marketing default); .fae-shell-dark for tool
   -------------------------------------------------------------------------- */
.fae-header {
  background: var(--fae-card);
  border-bottom: 1px solid var(--fae-border);
  font-family: var(--fae-font);
}
.fae-header__inner {
  max-width: var(--fae-max-width);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fae-header__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--fae-text);
  font-weight: 700;
  font-size: 1.1rem;
  min-height: var(--fae-touch-target);
}
.fae-header__brand img { height: 44px; width: auto; }
.fae-header__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.fae-header__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--fae-touch-target);
  padding: 0.5rem 0.75rem;
  color: var(--fae-text-muted);
  text-decoration: none;
  font-weight: 500;
  border-radius: 0.5rem;
}
.fae-header__link:hover { color: var(--fae-teal-800); background: var(--fae-surface-alt); }
.fae-header__link--accent { color: var(--fae-teal-700); font-weight: 600; }
.fae-header__cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--fae-touch-target);
  padding: 0.5rem 1.25rem;
  background: var(--fae-teal-700);
  color: #ffffff;
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
}
.fae-header__cta:hover { background: var(--fae-teal-800); }

/* Dark variant (tool pages) */
.fae-shell-dark .fae-header,
.fae-header.fae-shell-dark {
  background: var(--fae-ink-900);
  border-bottom: 1px solid var(--fae-ink-700);
}
.fae-shell-dark .fae-header__brand { color: var(--fae-text-on-dark); }
.fae-shell-dark .fae-header__link { color: var(--fae-text-muted-on-dark); }
.fae-shell-dark .fae-header__link:hover { color: var(--fae-teal-300); background: var(--fae-ink-800); }
.fae-shell-dark .fae-header__link--accent { color: var(--fae-teal-300); }

/* --------------------------------------------------------------------------
   Shared footer
   -------------------------------------------------------------------------- */
.fae-footer {
  background: var(--fae-ink-950);
  color: var(--fae-text-muted-on-dark);
  font-family: var(--fae-font);
  margin-top: auto;
}
.fae-footer__inner {
  max-width: var(--fae-max-width);
  margin: 0 auto;
  padding: 2.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
.fae-footer__col { min-width: 14rem; }
.fae-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--fae-text-on-dark);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.fae-footer__brand img { height: 32px; width: auto; }
.fae-footer a {
  color: var(--fae-teal-300);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--fae-touch-target);
}
.fae-footer a:hover { text-decoration: underline; }
.fae-footer__legal {
  border-top: 1px solid var(--fae-ink-700);
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Focus visibility (WCAG 2.4.7)
   -------------------------------------------------------------------------- */
.fae-header a:focus-visible,
.fae-footer a:focus-visible,
.fae-focus a:focus-visible,
.fae-focus button:focus-visible {
  outline: 3px solid var(--fae-teal-500);
  outline-offset: 2px;
  border-radius: 0.25rem;
}
.fae-shell-dark a:focus-visible {
  outline-color: var(--fae-teal-300);
}