/* ============================================================
   RetirePlusPlus Design Tokens & Senior-Friendly Utilities
   ============================================================ */

/* Wave30 Epic B: residual utility classes auto-extracted from inline
   styles by .claude/wave30_residual_extract.py. Imported here so every
   page that already loads retireplusplus.css inherits them with no
   per-page <link> change. */
@import url("/css/wave30-residual.css");

/* Self-hosted fonts (CSP-clean under style-src 'self'; woff2 via font-src
   'self' https:): Fraunces display serif + Plus Jakarta Sans body sans, both
   served from SHARED_VENDORS at /vendors/fonts/. */
@import url("/vendors/fonts/fraunces/fraunces.css");
@import url("/vendors/fonts/plus-jakarta-sans/plus-jakarta-sans.css");

:root {
  /* Shared dashboard chrome offset. Embedded pages add no top clearance. */
  --app-header-offset: 3.75rem;
  /* ---- Brand palette — "Golden-Hour Clarity" ----
     Amber-forward, single restrained pine secondary, ZERO blue. Amber is a
     BACKGROUND/border color (white-on-amber fails); use dark ink on amber
     fills (--retire-on-accent) and deep-amber for amber-as-text. */
  --color-primary: #8A5A05;
  --color-primary-light: #B97706;
  --color-primary-dark: #6E4604;
  --color-secondary: #2F5D50;
  --color-secondary-light: #4E7A6C;
  --color-secondary-dark: #244A40;

  /* ---- Aliases (used throughout templates) ---- */
  --retire-primary: #8A5A05;         /* deep amber — links / nav-active / heading icons (6.9:1 on paper) */
  --retire-primary-light: #B97706;   /* amber — hovers / lighter accents */
  --retire-primary-dark: #6E4604;    /* deepest amber — link hover */
  --retire-secondary: #2F5D50;       /* pine — the single restrained secondary */
  --retire-secondary-light: #4E7A6C;
  --retire-accent: #F59E0B;          /* brand amber — fills / CTAs (decorative) */
  --retire-accent-light: #F5C24B;
  --retire-accent-dark: #D97706;
  --retire-on-accent: #1F2937;       /* dark ink ON amber fills — 7:1 (white-on-amber fails) */
  --retire-rose: #8C3A2B;            /* warm claret — negative / alert (bg-safe with white text) */
  --retire-focus: #2F5D50;           /* focus ring — pine reads on paper AND on amber */
  --retire-focus-glow: rgba(47,93,80,0.26);

  /* ---- THEME-INVARIANT amber (do NOT override these in [data-theme="dark"]) ----
     --retire-primary deliberately repoints to a LIGHT amber in dark mode because
     there it is a FOREGROUND colour on espresso. Any component that paints amber
     onto a permanently-light surface — a white pill, a paper card, a badge that
     keeps its light fill in both themes — must NOT follow that repoint, or it
     inverts to white-on-#F5C24B / #F5C24B-on-white = 1.65:1 in dark.
     (That inversion was 72 AA failures across 15 pages; see UI_FINAL_2026-07-24.)
     Rules of thumb:
       amber FILL + text on it        -> --retire-accent      + --retire-on-accent
       amber TEXT on white/paper      -> --retire-accent-ink
       pine FILL + white text on it   -> --retire-secondary-solid + #FFFFFF */
  --retire-accent-ink: #8A5A05;      /* deep amber as TEXT on white/paper — 6.9:1, both themes */
  --retire-accent-ink-hover: #6E4604;
  --retire-secondary-solid: #2F5D50; /* pine fill that stays dark enough for white text — 7.6:1 */

  /* ---- Typography — Fraunces (display) + Plus Jakarta Sans (body) ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid rem type scale — clamp(min, preferred, max). Body floor 1.125rem
     (senior-first mandate). Every value in rem; zero px. */
  --font-body: clamp(1.125rem, 1.07rem + 0.24vw, 1.1875rem);
  --font-size-body: var(--font-body);
  --font-label: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --font-size-label: var(--font-label);
  --font-meta: clamp(0.9375rem, 0.9rem + 0.16vw, 1rem);
  --font-heading-sm: clamp(1.25rem, 1.14rem + 0.5vw, 1.4rem);
  --font-heading-md: clamp(1.375rem, 1.18rem + 0.85vw, 1.75rem);
  --font-heading-lg: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --font-heading-xl: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);
  --font-heading-hero: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  --font-size-heading: var(--font-heading-md);
  --font-size-hero: var(--font-heading-hero);
  --line-height: 1.6;
  --line-height-body: 1.6;
  --line-height-heading: 1.15;

  /* ---- Spacing / shape ---- */
  --touch-target: 2.75rem;
  --touch-min: 2.75rem;
  --radius: 0.75rem;
  --section-padding: 5rem;
  --card-padding: 1.75rem;
  --card-radius: 1rem;

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-normal: 260ms cubic-bezier(.2,.7,.2,1);
  --transition-slow: 500ms cubic-bezier(.2,.7,.2,1);

  /* ---- Shadow (theme blocks override with warm-tinted versions) ---- */
  --shadow: 0 0.0625rem 0.1875rem rgba(74,54,30,0.08);
}

/* ---- Light Theme (default) — golden-hour paper ---- */
:root,
[data-theme="light"] {
  --color-bg: #F7EFE2;
  --color-bg-alt: #F1E6D3;
  --color-text: #2A211A;
  --color-text-muted: #6E5F4E;
  --color-border: #E9DCC6;

  --retire-bg: #F7EFE2;              /* warm cream paper */
  --retire-bg-alt: #F1E6D3;          /* deeper cream — hovers / nav-active bg */
  --retire-surface: #FCF6EC;         /* lifted card cream */
  --retire-surface-elevated: #FFFDF9;/* highest surface */
  --retire-text: #2A211A;            /* deep warm ink — ~12:1 on paper */
  --retire-text-secondary: #5A4D3E;  /* ~6.4:1 on paper */
  /* WCAG AA: muted text clears 4.5:1 on every surface it sits on
     (#F7EFE2 bg / #FCF6EC surface / #F1E6D3 hover). #6E5F4E -> ~5:1. */
  --retire-text-muted: #6E5F4E;
  --retire-border: #E9DCC6;
  --retire-border-light: #F1E7D6;
  --retire-shadow: 0 0.0625rem 0.1875rem rgba(74, 54, 30, 0.07);
  --retire-shadow-md: 0 0.25rem 0.75rem rgba(74, 54, 30, 0.10);
  --retire-shadow-lg: 0 0.5rem 1.75rem rgba(74, 54, 30, 0.13);
  --retire-hero-gradient: linear-gradient(150deg, #FBF3E6 0%, #F3E9D6 100%);
  --retire-card-hover-bg: #F1E6D3;
  --retire-overlay: rgba(42, 33, 26, 0.5);
  --shadow: 0 0.0625rem 0.1875rem rgba(74, 54, 30, 0.08);

  /* golden-hour atmosphere accents */
  --retire-amber-wash: rgba(245, 158, 11, 0.14);
  --retire-pine-wash: rgba(47, 93, 80, 0.12);
  --retire-arc-track: #EADAC0;
}

/* ---- Dark Theme — warm espresso (golden-hour after dusk, not slate) ---- */
[data-theme="dark"] {
  --color-bg: #1B1510;
  --color-bg-alt: #241D15;
  --color-text: #F3E9D8;
  --color-text-muted: #A2917A;
  --color-border: #3B3020;

  /* Amber/pine repointed to LIGHT values so they read as FOREGROUND on
     espresso (deep-amber/pine would fail as text on a dark bg). Amber FILLS
     stay light in both themes, so --retire-on-accent (dark ink) is unchanged. */
  --retire-primary: #F5C24B;         /* light amber — links / nav / icons on dark (~9.6:1) */
  --retire-primary-light: #F5C24B;
  --retire-primary-dark: #E6AE4A;
  --retire-secondary: #6FB79E;       /* lifted pine — text / icon on dark (~6.4:1) */
  --retire-secondary-light: #8AC9B3;
  --retire-focus: #6FB79E;
  --retire-focus-glow: rgba(111, 183, 158, 0.30);

  --retire-bg: #1B1510;              /* deep espresso */
  --retire-bg-alt: #241D15;
  --retire-surface: #241D15;         /* lifted card */
  --retire-surface-elevated: #2C241A;/* highest surface */
  --retire-text: #F3E9D8;            /* warm off-white — ~13:1 */
  --retire-text-secondary: #C4B49A;  /* ~7.6:1 */
  /* WCAG AA: muted clears 4.5:1 on all dark surfaces
     (#1B1510 bg / #241D15 surface / #2C241A elevated / #322818 hover).
     #A2917A -> ~4.9:1 worst-case. */
  --retire-text-muted: #A2917A;
  --retire-border: #3B3020;
  --retire-border-light: #2C241A;
  --retire-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.32);
  --retire-shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.40);
  --retire-shadow-lg: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.50);
  --retire-hero-gradient: linear-gradient(150deg, #2C2318 0%, #191309 100%);
  --retire-card-hover-bg: #322818;
  --retire-overlay: rgba(0, 0, 0, 0.62);
  --shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.35);

  --retire-amber-wash: rgba(245, 158, 11, 0.16);
  --retire-pine-wash: rgba(111, 183, 158, 0.16);
  --retire-arc-track: #3B3020;
}

/* ============================================================
   Base Styles
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--font-body);
  line-height: var(--line-height-body);
  background: var(--retire-bg);
  color: var(--retire-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Editorial voice: Fraunces (display serif) leads headings site-wide, with
   optical sizing so large headings pick up the display cut automatically.
   Pages that need a sans heading can opt out with .font-sans. */
h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: var(--line-height-heading);
}
.font-sans { font-family: var(--font-sans) !important; }

/* ============================================================
   Skip-to-content link (WCAG 2.4.1 Bypass Blocks, Level A)
   Visually hidden until focused, then pinned top-left and themed.
   Injected as the first focusable element by public-shell.js /
   dashboard-shell.js (and inline on landing).
   ============================================================ */
.skip-to-content {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0.625rem 1.25rem;
  background: var(--retire-primary);
  color: #FFFFFF;
  font-size: var(--font-label, 1rem);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.35);
  /* Off-screen until focused — kept in the tab order so it is the first stop. */
  transform: translateY(-150%);
  opacity: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  transform: translateY(0);
  opacity: 1;
  outline: 0.1875rem solid var(--retire-focus);
  outline-offset: 0.125rem;
}
@media (prefers-reduced-motion: reduce) {
  .skip-to-content { transition: none; }
}