/*
  Design Tokens
  Single source of truth for the NaviCall brand system.
  Reference these custom properties from every other stylesheet —
  never hard-code a color, font, spacing, or radius value elsewhere.
*/

:root {
  /* ---------- Color: surfaces ---------- */
  --color-bg:            #fbfaf7; /* page background (warm off-white) */
  --color-bg-alt:        #eef5f6; /* alternate section background */
  --color-bg-dark:       #0b4a5f; /* deep teal section background */
  --color-surface:       #ffffff; /* cards / panels */

  /* ---------- Color: brand ---------- */
  --color-primary:       #17849b; /* signature teal */
  --color-primary-dark:  #0b4a5f; /* deep teal, hovers + dark bg */
  --color-primary-pale:  #d9eef1; /* badge / icon-tile background */
  --color-primary-paler: #bcdde2; /* numerals, faint accents */

  /* ---------- Color: text on light ---------- */
  --color-ink:           #1a2b2f; /* base text */
  --color-ink-strong:    #14242a; /* headings */
  --color-ink-soft:      #4a5c5f; /* body copy */
  --color-ink-softer:    #5a6c6f; /* card copy */
  --color-ink-muted:     #7a8c8e; /* captions, footer copy */

  /* ---------- Color: text on dark ---------- */
  --color-on-dark:         #ffffff;
  --color-on-dark-soft:    #a9d6dc;
  --color-on-dark-softer:  #bfe6ea;
  --color-on-dark-border:  rgba(255, 255, 255, 0.25);

  /* ---------- Color: borders / dividers ---------- */
  --color-border:      rgba(26, 43, 47, 0.10);
  --color-border-soft: rgba(26, 43, 47, 0.08);

  /* ---------- Typography ---------- */
  --font-display: 'Newsreader', serif;
  --font-body:    'Work Sans', sans-serif;

  --fs-h1:      clamp(2.4rem, 4.2vw + 1rem, 4.125rem);   /* 38px -> 66px */
  --fs-h2:      clamp(1.9rem, 2.6vw + 1rem, 2.75rem);    /* 30px -> 44px */
  --fs-h3:      1.1875rem;                               /* 19px */
  --fs-lead:    clamp(1.05rem, 0.6vw + 0.9rem, 1.1875rem); /* 17px -> 19px */
  --fs-body:    1.0625rem;                               /* 17px */
  --fs-body-sm: 0.9375rem;                               /* 15px */
  --fs-caption: 0.8125rem;                               /* 13px */
  --fs-stat:    clamp(1.75rem, 2vw + 1rem, 2.375rem);    /* 28px -> 38px */

  --lh-tight:  1.05;
  --lh-snug:   1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ---------- Spacing scale ---------- */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-18: 4.5rem;   /* 72px */
  --space-24: 6rem;     /* 96px */
  --space-30: 7.5rem;   /* 120px */

  /* ---------- Radius ---------- */
  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   24px;
  --radius-full: 100px;

  /* ---------- Shadow ---------- */
  --shadow-hero: 0 30px 60px -20px rgba(20, 66, 79, 0.35);
  --shadow-card-hover: 0 20px 40px -24px rgba(20, 66, 79, 0.25);

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.16, 0.8, 0.24, 1);
  --dur-fast:     150ms;
  --dur-base:     250ms;
  --dur-slow:     600ms;
  --dur-slower:   800ms;

  /* ---------- Layout ---------- */
  --container-max: 1300px;
  --container-max-wide: 1400px;
  --container-pad: clamp(20px, 5vw, 56px);
}