/* ============================================================
   Find Parent Advocates — Rebrand Design System v1
   Editorial · premium · human · calm confidence

   Semantic tokens (--background, --accent, …) mirror the brand doc.
   --fpa-app-* names are kept for existing app stylesheets.
   ============================================================ */
:root {
  /* ——— Core palette (brand doc) ——— */
  --background: #faf9f6;
  --foreground: #111111;
  --muted: #f3f1ec;
  --muted-foreground: #5f5f5f;
  --border: #e8e6e1;
  --card: #ffffff;

  /* ——— Accent (editorial orange-red — use sparingly) ——— */
  --accent: #ff5a36;
  --accent-hover: #e94e2e;
  --accent-soft: #fff1ec;

  /* ——— Buttons ——— */
  --button-primary: #111111;
  --button-primary-text: #ffffff;
  --button-secondary: #ffffff;
  --button-secondary-border: #d8d6d1;

  /* ——— Radius ——— */
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 40px;

  /* ——— Shadows (very subtle) ——— */
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.03), 0 8px 24px rgb(0 0 0 / 0.04);
  --shadow-nav: 0 4px 20px rgb(0 0 0 / 0.12);

  /* ——— Advocate portrait cards ——— */
  --card-radius: var(--radius-lg);
  --card-overlay: linear-gradient(
    to top,
    rgb(0 0 0 / 0.72),
    rgb(0 0 0 / 0.08),
    transparent
  );

  /* ——— Typography ——— */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "DM Serif Display", "Georgia", "Times New Roman", serif;

  /* ——— fpa-app aliases (used across app CSS) ——— */

  /* Primary actions & key chrome → editorial black CTA */
  --fpa-app-brand: var(--button-primary);
  --fpa-app-brand-hover: #2a2a2a;
  --fpa-app-brand-active: #000000;
  --fpa-app-on-brand: var(--button-primary-text);

  /* Accent — micro highlights, dividers, active dots */
  --fpa-app-accent: var(--accent);
  --fpa-app-accent-hover: var(--accent-hover);
  --fpa-app-accent-active: #d44328;
  --fpa-app-on-accent: #ffffff;
  --fpa-app-accent-soft: var(--accent-soft);

  /* Channel values for translucent UI */
  --fpa-app-brand-ch: 17 17 17;
  --fpa-app-accent-ch: 255 90 54;
  --fpa-app-ink-ch: 17 17 17;

  /* Favorite heart */
  --fpa-app-heart-outline: rgb(var(--fpa-app-ink-ch) / 0.38);
  --fpa-app-heart-outline-hover: rgb(var(--fpa-app-ink-ch) / 0.55);
  --fpa-app-heart: var(--fpa-app-accent);
  --fpa-app-heart-hover: var(--fpa-app-accent-hover);
  --fpa-app-heart-ch: var(--fpa-app-accent-ch);

  /* Surfaces */
  --fpa-app-bg: var(--background);
  --fpa-app-surface: var(--card);
  --fpa-app-surface-elevated: var(--card);
  --fpa-app-card: var(--card);
  --fpa-app-surface-muted: var(--muted);
  --fpa-app-border: var(--border);

  /* Text */
  --fpa-app-text: var(--foreground);
  --fpa-app-text-muted: var(--muted-foreground);
  --fpa-app-text-on-forest: var(--foreground);

  /* Soft strips & chips (search, browse, skeletons) */
  --fpa-app-hero-bg: var(--muted);

  /* Floating nav — calm premium dark bar */
  --fpa-app-nav-bg: #111111;
  --fpa-app-nav-border: var(--border);
  --fpa-app-nav-bar-border: rgb(255 255 255 / 0.1);
  --fpa-app-nav-item: rgb(255 255 255 / 0.45);
  --fpa-app-nav-item-hover: rgb(255 255 255 / 0.88);
  --fpa-app-nav-active: var(--fpa-app-accent);

  /* Avatar initials */
  --fpa-app-initials-bg: #ebe9e4;
  --fpa-app-initials-text: var(--foreground);

  /* Legacy token names */
  --fpa-app-forest: var(--fpa-app-hero-bg);
  --fpa-app-forest-deep: var(--fpa-app-brand);
  --fpa-app-forest-soft: var(--fpa-app-initials-bg);

  /* Radius */
  --fpa-app-radius-sm: var(--radius-sm);
  --fpa-app-radius-md: var(--radius-md);
  --fpa-app-radius-lg: var(--radius-lg);
  --fpa-app-radius-xl: var(--radius-xl);
  --fpa-app-radius-pill: 999px;

  /* Card-specific */
  --fpa-app-card-radius: var(--card-radius);
  --fpa-app-card-overlay: var(--card-overlay);

  /* Shadows */
  --fpa-app-shadow-card: var(--shadow-card);
  --fpa-app-shadow-nav: var(--shadow-nav);

  /* Buttons */
  --fpa-app-button-primary: var(--button-primary);
  --fpa-app-button-primary-text: var(--button-primary-text);
  --fpa-app-button-secondary: var(--button-secondary);
  --fpa-app-button-secondary-border: var(--button-secondary-border);

  /* Focus */
  --fpa-app-focus-ring: 0 0 0 3px rgb(var(--fpa-app-ink-ch) / 0.18);

  /* Typography */
  --fpa-app-font-sans: var(--font-sans);
  --fpa-app-font-display: var(--font-display);

  /* Spacing scale */
  --fpa-app-space-1: 4px;
  --fpa-app-space-2: 8px;
  --fpa-app-space-3: 12px;
  --fpa-app-space-4: 16px;
  --fpa-app-space-5: 20px;
  --fpa-app-space-6: 24px;
  --fpa-app-space-8: 32px;

  /* Layout */
  --fpa-app-max-width: 1120px;
  --fpa-app-nav-height: 72px;
  --fpa-app-safe-bottom: env(safe-area-inset-bottom, 0px);
}