/* ==========================================================================
   USARateHub design tokens
   Palette is DirectLoanExpress's, verbatim. Do not invent tints.
   Two contrast rules are load-bearing and are asserted in comments below.
   ========================================================================== */

:root {
  /* --- surface ---------------------------------------------------------- */
  --navy:        #0B1F33;
  --navy-2:      #13314A;
  --ink:         #18222E;
  --ink-soft:    #36475A;
  --text:        #44566B;
  --muted:       #586A7E;
  --paper:       #F5F8FB;
  --card:        #FFFFFF;
  --line:        #DEE5ED;
  --line-soft:   #E9EFF5;

  /* --- accent ----------------------------------------------------------- */
  --accent:         #2F6CA4;
  --accent-deep:    #1E4A78;
  --accent-on-navy: #9DC6EC;  /* accent on navy is 2.98:1 and FAILS. Use this. */
  --accent-tint:    #DCE9F6;

  /* gold is NEVER text on a light surface: 1.78:1 on white.
     On light surfaces gold is a filled shape or a rule of 3px or more.
     Gold text exists only on --navy (9.10:1) or --ink. */
  --gold:        #E5B567;
  --gold-deep:   #C9974A;
  --sand:        #D8C9A8;
  --sand-deep:   #B49F6F;

  /* --- state ------------------------------------------------------------ */
  --focus:         var(--accent);
  --focus-dark:    var(--accent-on-navy);
  --sh-focus:      0 0 0 3px var(--accent-tint);
  --sh-btn-hover:  0 10px 22px -10px rgba(30, 74, 120, .42);
  --disabled-bg:   var(--line-soft);
  --disabled-fg:   var(--muted);
  --on-navy-soft:  rgba(255, 255, 255, .85);
  --on-navy-mute:  rgba(255, 255, 255, .66);
  --on-navy-line:  rgba(255, 255, 255, .15);

  /* --- shape, shadow, motion -------------------------------------------- */
  --r:      14px;   /* inputs and small chips only */
  --r-lg:   20px;   /* the workhorse: cards and panels */
  --pill:   999px;
  --ease:   cubic-bezier(.22, .61, .36, 1);
  --sh-sm:  0 6px 18px -8px rgba(24, 34, 46, .16);
  --sh-lg:  0 2px 4px rgba(24, 34, 46, .04), 0 28px 64px -32px rgba(24, 34, 46, .34);

  /* --- type ------------------------------------------------------------- */
  --fd: "Space Grotesk", -apple-system, system-ui, sans-serif;      /* display + ALL numerals */
  --fb: "Public Sans", -apple-system, system-ui, "Segoe UI", sans-serif;

  --t-h1:      clamp(2.125rem, 1.42rem + 3vw,    3.75rem);   /* 34 -> 60 */
  --t-h2:      clamp(1.5rem,   1.24rem + 1.1vw,  2.25rem);   /* 24 -> 36 */
  --t-h3:      clamp(1.1875rem, 1.09rem + .42vw, 1.5rem);    /* 19 -> 24 */
  --t-h4:      1.0625rem;                                    /* body face, 700 */
  --t-lead:    clamp(1.0625rem, 1.01rem + .24vw, 1.25rem);   /* 17 -> 20 */
  --t-body:    1rem;
  --t-small:   .8125rem;
  --t-eyebrow: .6875rem;

  /* --- spacing, 4px base ------------------------------------------------ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* --- layout ----------------------------------------------------------- */
  --w:        1160px;
  --w-narrow: 704px;                                   /* ~68ch at 17px */
  --gut:      clamp(1rem, .6rem + 1.7vw, 1.5rem);      /* 16 -> 24 */
  --sec-y:    clamp(2rem, 1rem + 4.2vw, 5.5rem);       /* 32 -> 88 */
  --hdr-h:    56px;
}

@media (min-width: 768px) {
  :root {
    --t-body: 1.0625rem;
    --hdr-h:  64px;
  }
}