/* Design tokens for the public, pre-login pages.
   Defined here, on :root in a NON-scoped stylesheet, on purpose. A .razor.css
   file cannot declare them: CSS isolation rewrites the selector to
   :root[b-xxxxx], which matches nothing. Declared here they inherit into every
   scoped component, so LandingContent, PublicNav and PublicLayout share one
   palette instead of each hard-coding hex values.

   Palette follows the 2026 marketing direction: navy as the ink and as one
   dark band, warm paper as the page ground, brown as the single accent.
   Light-first - navy is deliberately NOT the hero background. */
:root {
    --pub-navy:        #1F3B57;
    --pub-navy-deep:   #16293C;
    --pub-navy-soft:   #3D5266;
    --pub-ink:         #2C4459;
    --pub-muted:       #4A5F73;
    --pub-label:       #5C6E80;
    --pub-quiet:       #7A8896;
    --pub-faint:       #9AA3AC;

    --pub-accent:      #8B7355;
    --pub-accent-dark: #6F5B42;
    --pub-accent-lift: #9C8261;
    --pub-accent-soft: #B9A78C;

    --pub-paper:       #FAF8F4;
    --pub-paper-warm:  #F3EDE3;
    --pub-paper-deep:  #E7DECE;
    --pub-paper-lift:  #FFFDFA;
    --pub-white:       #FFFFFF;
    --pub-line:        #E8E3DA;
    --pub-line-soft:   #EFEAE1;
    --pub-line-warm:   #EAE4D9;

    /* Text on the navy band. Pure white for headings, these for body copy. */
    --pub-on-navy:      #C6D2DD;
    --pub-on-navy-soft: #B7C5D2;

    --pub-ok:   #3D8A5E;
    --pub-warn: #B43C3C;

    --pub-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* One measure for the whole public surface, so a compare page and the
       landing page line their content up instead of sitting 60px apart. */
    --pub-measure: 1200px;
    --pub-gutter:  32px;

    /* Marketing headings are set tight and heavy - 800 at a negative track.
       Kept as tokens because every public h1/h2 repeats the pair. */
    --pub-h-weight: 800;
    --pub-h-track:  -0.03em;

    --pub-radius:    16px;
    --pub-radius-sm: 9px;
    --pub-shadow:    0 18px 44px rgba(31, 59, 87, 0.10);
    --pub-shadow-lg: 0 24px 60px rgba(31, 59, 87, 0.14);

    /* One breakpoint vocabulary for the whole public surface, so the landing
       page and PublicLayout collapse at the same widths rather than 40px
       apart. Media queries cannot read custom properties, so these are
       documentation for the values used literally below and in the scoped
       files: 980px = two-column hero/content stacks, 900px = nav collapses to
       a drawer, 768px = multi-column grids drop to two, 600px =
       single-column, tightened padding. */
}