/* =============================================================================
   tokens.css — PHR brand design tokens (the single source of truth for style)
   -----------------------------------------------------------------------------
   Every color, font, and spacing value used by the site lives here as a CSS
   custom property. Components reference the tokens, never raw values — so
   re-skinning the site (or swapping in licensed PHR webfonts) is a one-file edit.
   Values mirror BRAND_GUIDELINES.md. Keep the two in sync.
   ============================================================================ */

:root {
  /* --- Primary palette ------------------------------------------------------ */
  --phr-red:   #D6001C;  /* the single accent — logo, severe data, CTAs        */
  --phr-gray:  #796E65;  /* warm gray — body text, dark cover backgrounds       */
  --white:     #FFFFFF;

  /* --- Secondary palette (category differentiation) ------------------------- */
  --phr-khaki:      #B0AA7E;
  --phr-blue-gray:  #688197;
  --phr-navy:       #003C71;
  --phr-orange:     #DC6B2F;
  --phr-sage:       #7F9C90;
  --phr-tan:        #B58150;
  --phr-sienna:     #594A25;
  --phr-light-gray: #9D968D;

  /* --- Accent palette (limited emphasis) ------------------------------------ */
  --phr-yellow:     #F2A900;
  --phr-purple:     #86647A;
  --phr-light-blue: #A3C7D2;
  --phr-green:      #5E7461;
  --phr-pale-blue:  #869CAE;
  --phr-dark-gray:  #5B6770;

  /* --- Semantic roles (use these in components, not the raw names above) ---- */
  --color-bg:           var(--white);
  --color-bg-muted:     #F4F2F0;            /* faint warm tint for panels       */
  --color-bg-dark:      var(--phr-gray);    /* "cover" sections                 */
  --color-text:         #2B2622;            /* near-black warm, for body         */
  --color-text-muted:   var(--phr-gray);
  --color-text-on-dark: var(--white);
  --color-accent:       var(--phr-red);
  --color-border:       #E3DFDB;
  --color-focus:        var(--phr-navy);    /* keyboard focus ring               */

  /* --- Typography ----------------------------------------------------------- */
  /* Frutiger (sans) and Tisa (serif) are licensed; the guidelines approve these
     web-safe equivalents. Swap these two tokens to drop in licensed webfonts.  */
  --font-sans:  Arial, Helvetica, "Helvetica Neue", sans-serif;  /* headlines, UI */
  --font-serif: Georgia, "Times New Roman", serif;               /* body copy     */

  /* Type scale (rem). Modest, editorial — not flashy. */
  --fs-xs:   0.8125rem;   /* 13px — captions, fine print     */
  --fs-sm:   0.9375rem;   /* 15px — UI, labels               */
  --fs-base: 1.0625rem;   /* 17px — body                     */
  --fs-lg:   1.375rem;    /* 22px — lead / intro             */
  --fs-xl:   1.875rem;    /* 30px — section headings         */
  --fs-2xl:  2.75rem;     /* 44px — page / hero headings     */
  --fs-3xl:  4rem;        /* 64px — big stat numbers         */

  --lh-tight: 1.15;
  --lh-body:  1.6;

  /* --- Spacing scale (rem) -------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* --- Layout --------------------------------------------------------------- */
  --measure:        68ch;     /* comfortable reading width for prose            */
  --content-max:    1200px;   /* outer page max-width                           */
  --radius:         4px;
  --header-height:  64px;
  --draft-banner-height: 0px;   /* the draft banner has been removed; kept at 0
                                   so --top-chrome-height stays a single source
                                   of truth if a banner is ever reintroduced */
  --top-chrome-height: calc(var(--draft-banner-height) + var(--header-height));
}

@media (max-width: 820px) {
  :root {
    --header-height: 56px;
  }
}

/* --- Motion ---------------------------------------------------------------- */
:root {
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --duration:   0.5s;
}