/*
 * tokens.css — DHS Design System
 * ─────────────────────────────────────────────────────────────
 * THIS IS THE SINGLE SOURCE OF TRUTH for colors, typography,
 * spacing, and radii.
 *
 * HOW TO CHANGE THE BRAND:
 *   • Swap a hex below and it updates everywhere in the theme.
 *   • Never hard-code a color in page CSS — use var(--clr-*).
 *
 * ─────────────────────────────────────────────────────────────
 */

:root {

  /* ── Core palette ─────────────────────────────────── */
  --clr-aqua:       #38C1E7;   /* primary accent / CTA highlight  */
  --clr-ocean:      #2B94CA;   /* links, secondary accent         */
  --clr-sapphire:   #2755A0;   /* mid-depth brand blue            */
  --clr-cobalt:     #2E4083;   /* headings, dark text             */
  --clr-charcoal:   #2F4958;   /* body text                       */
  --clr-steel:      #717B88;   /* secondary text, labels          */
  --clr-cloud:      #EFF3F6;   /* card backgrounds                */
  --clr-sky:        #DAF1F9;   /* light accent fills              */
  --clr-silver:     #DFE0E4;   /* borders, dividers               */
  --clr-green:      #3CDE77;   /* success / Service Line Growth accent */
  --clr-orange:     #EF8E3F;   /* Philanthropy accent             */
  --clr-white:      #FFFFFF;

  /* ── Gradients ────────────────────────────────────── */
  --grad-primary:       linear-gradient(135deg, #38C1E7 0%, #2B94CA 100%);
  --grad-primary-hover: linear-gradient(135deg, #29AED4 0%, #2585B8 100%);
  --grad-brand-bar:     linear-gradient(90deg, #38C1E7 0%, #2E4083 100%);
  --grad-cobalt:        linear-gradient(135deg, #2B94CA 0%, #2E4083 100%);

  /* ── Typography ───────────────────────────────────── */
  --font-base:    'Mulish', 'Helvetica Neue', Arial, sans-serif;
  --font-script:  'Dancing Script', cursive;   /* signatures only */

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;
  --text-4xl:   38px;
  --text-5xl:   52px;

  /* ── Spacing ──────────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Radii ────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-pill: 9999px;

  /* ── Shadows ──────────────────────────────────────── */
  --shadow-card:    0 8px 24px rgba(47, 73, 88, 0.10);
  --shadow-nav:     0 2px  8px rgba(15, 30, 45, 0.06);
  --shadow-modal:   0 12px 32px rgba(47, 73, 88, 0.14);

  /* ── Layout ───────────────────────────────────────── */
  --max-width:      1200px;
  --max-width-text:  880px;
  --nav-height:      100px;  /* matches paddingTop on page sections */

}