/* ============================================================================
   PayrAdvisors — Brand Design Tokens
   Single source of truth for color, type, spacing, and rhythm.
   Brand spec: 5 colors only (Navy, Blue, Deep Navy, Magenta, White) + fonts.
   Neutrals below are navy-derived tints (not a 6th brand color).
   NOTE: teal/steel accents are an approved EXCEPTION scoped to the Insights
   page only — they live in assets/css/insights.css, never here.
   ============================================================================ */

:root {

  /* ---------- Brand colors (the only five) ---------- */
  --navy:        #002545; /* primary dark; headings on light; footer bg */
  --blue:        #1C7FD6; /* secondary */
  --deep-navy:   #02101F; /* deepest dark */
  --magenta:     #E6007E; /* THE single accent / CTA color */
  --white:       #FFFFFF;

  /* Magenta interaction state (derived, darker) */
  --magenta-600: #C2006A;

  /* ---------- Neutrals (navy-derived tints — utility only) ---------- */
  --ink:         #14222E; /* primary body text (navy-derived dark) */
  --muted:       #5A6875; /* secondary / supporting text */
  --faint:       #8A97A4; /* meta, captions, placeholders */
  --line:        #E1E7EB; /* borders, dividers (navy 12% on white) */
  --line-2:      #EEF2F5; /* lighter hairlines */
  --surface:     #F5F7F9; /* alt section background (navy 4% on white) */
  --surface-2:   #EBEFF2; /* slightly deeper surface */

  /* ---------- Semantic roles ---------- */
  --bg:            var(--white);
  --text:          var(--ink);
  --heading:       var(--navy);
  --accent:        var(--magenta);
  --accent-hover:  var(--magenta-600);
  --link:          var(--blue);
  --link-hover:    var(--navy);

  /* On-dark text (navy/deep-navy backgrounds) */
  --on-dark:        var(--white);
  --on-dark-soft:   rgba(255, 255, 255, 0.78);
  --on-dark-faint:  rgba(255, 255, 255, 0.55);
  --on-dark-line:   rgba(255, 255, 255, 0.16);

  /* Image-band scrim (navy gradient over photography) */
  --scrim:        linear-gradient(100deg, rgba(0, 18, 35, 0.92) 0%, rgba(0, 37, 69, 0.82) 50%, rgba(0, 37, 69, 0.45) 100%);
  --scrim-flat:   linear-gradient(rgba(0, 28, 52, 0.88), rgba(0, 28, 52, 0.92));

  /* ---------- Typography ---------- */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; /* headlines only */
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* everything else */

  --weight-body:     400;
  --weight-medium:   500;
  --weight-emphasis: 600;
  --weight-heading:  700; /* Source Serif 4 bold per brand */

  /* Fluid type scale (mobile -> desktop) */
  --fs-eyebrow: 0.6875rem;                          /* 11px tracked-uppercase label */
  --fs-small:   0.8125rem;                           /* 13px */
  --fs-body:    1rem;                                /* 16px */
  --fs-lead:    clamp(1rem, 0.95rem + 0.4vw, 1.125rem);   /* 16 -> 18 */
  --fs-h6:      1rem;
  --fs-h5:      clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  --fs-h4:      clamp(1.1875rem, 1.05rem + 0.7vw, 1.375rem);
  --fs-h3:      clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 2.1vw, 2.5rem);
  --fs-h1:      clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);
  --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 5rem);     /* hero display */

  --lh-tight:   1.12;  /* headings */
  --lh-snug:    1.3;
  --lh-body:    1.65;
  --tracking-eyebrow: 0.16em;
  --tracking-tight:  -0.02em; /* large serif headings */

  /* ---------- Layout & spacing ---------- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 2.125rem); /* 20px -> 34px */
  --section-y:     clamp(3.5rem, 6vw, 5.25rem);   /* vertical section rhythm */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---------- Radii ---------- */
  --radius-sm: 7px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-sm:  0 1px 2px rgba(16, 38, 68, 0.06);
  --shadow-md:  0 18px 40px -28px rgba(16, 38, 68, 0.45);
  --shadow-lg:  0 28px 60px -34px rgba(16, 38, 68, 0.42);

  /* ---------- Motion ---------- */
  --transition: 0.16s ease;
  --transition-slow: 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---------- Z-index layers ---------- */
  --z-header:  100;
  --z-overlay: 200;
}