/* ============================================================
   PTTA — design tokens
   The ONLY :root block on the site. Change a value here and it
   changes everywhere. Do not define :root anywhere else.
   ============================================================ */

:root{
  /* --- brand ------------------------------------------------ */
  --brand:            #0B3D91;   /* PTTA navy */
  --brand-deep:       #082E6E;
  --brand-accent:     #005BBB;   /* links, 6.3:1 on white */
  --brand-footer:     #1E5082;   /* footer / divider band */
  --ring:             #1E6CF4;   /* focus outline */

  /* --- surfaces & text -------------------------------------- */
  --bg:               #F6F8FB;
  --surface:          #FFFFFF;
  --surface-alt:      #EEF3FA;
  --text:             #0A1A2B;
  --muted:            #4A5B70;   /* 6.4:1 on white */
  --line:             #E1E7F0;

  /* text ON the navy/footer backgrounds */
  --on-brand:         #FFFFFF;   /* 8.2:1 on --brand-footer */
  --on-brand-soft:    #DCE7FA;   /* 6.6:1 — replaces the old #666 */
  --on-brand-link:    #FFD166;   /* 5.5:1 */

  /* --- type -------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* fluid scale — safe now that html{font-size:100%} */
  --step-0:  clamp(1rem,    0.97rem + 0.15vw, 1.0625rem);  /* body   */
  --step-1:  clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);   /* lead   */
  --step-2:  clamp(1.35rem, 1.24rem + 0.55vw, 1.6rem);     /* h3     */
  --step-3:  clamp(1.6rem,  1.4rem  + 1vw,    2.1rem);     /* h2     */
  --step-4:  clamp(2rem,    1.6rem  + 2vw,    3rem);       /* h1     */

  /* --- layout ------------------------------------------------ */
  --maxw:            1240px;
  --maxw-prose:      68ch;
  --gutter:          clamp(16px, 4vw, 32px);
  --radius:          14px;
  --radius-sm:       10px;

  /* --- elevation --------------------------------------------- */
  --elev-1: 0 6px 18px rgba(16,33,62,.10);
  --elev-2: 0 12px 34px rgba(16,33,62,.16);

  /* --- motion (namespaced so nothing overwrites anything) ----- */
  --t-fast: 160ms ease;
  --t-nav:  240ms cubic-bezier(.22,.61,.36,1);
  --t-slow: 520ms cubic-bezier(.22,.61,.36,1);

  /* --- breakpoint reference (documentation only) -------------- */
  /* nav collapses below 900px */
}