/* ============================================================
   Design tokens — the single source of truth for the look.
   Premium 2026 aesthetic: ink + paper, one brand-blue accent,
   Inter throughout. Client brand: #31a0cb / #2594bf.
   ============================================================ */

:root {
  /* ---- Color: clean & light — blue / white / cream ---- */
  --paper:        #FAF6EC;   /* warm cream page background */
  --paper-2:      #F3ECDC;   /* soft cream alt section bg */
  --surface:      #FFFFFF;   /* white cards */
  --ink:          #1A1913;   /* warm near-black text */
  --ink-2:        #444336;   /* secondary text */
  --ink-3:        #77746A;   /* muted text */
  --line:         #EAE1CF;   /* warm hairlines / borders */
  --line-strong:  #D8CDB6;

  /* ---- Color: brand accent (client blue) ---- */
  --accent:        #31a0cb;   /* brand blue */
  --accent-strong: #2594bf;   /* darker — borders / hover */
  --accent-deep:   #17708f;   /* readable accent text on light backgrounds */
  --accent-tint:   #E3F2F9;   /* soft wash */
  --accent-ink:    #FFFFFF;   /* text that sits ON the accent */
  --ink-dark:      #0F2E3B;   /* deep navy for dark sections */

  /* ---- Semantic ---- */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --focus:        #2B6CFF;

  /* ---- Typography ---- */
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-300: 0.8125rem;  /* 13 */
  --fs-400: 1rem;       /* 16 */
  --fs-500: 1.125rem;   /* 18 */
  --fs-600: 1.375rem;   /* 22 */
  --fs-700: 1.875rem;   /* 30 */
  --fs-800: 2.75rem;    /* 44 */
  --fs-900: clamp(2.75rem, 7vw, 5.25rem); /* hero display */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.6;

  /* ---- Space scale (8pt-ish) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Shadows (soft, layered) ---- */
  --shadow-sm: 0 1px 2px rgba(20,21,15,.06), 0 1px 1px rgba(20,21,15,.04);
  --shadow-md: 0 6px 20px -6px rgba(20,21,15,.14), 0 2px 6px -2px rgba(20,21,15,.08);
  --shadow-lg: 0 24px 60px -18px rgba(20,21,15,.28), 0 8px 24px -10px rgba(20,21,15,.14);
  --shadow-accent: 0 14px 36px -12px rgba(49,160,203,.5);

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 72px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .16s;
  --dur: .28s;
  --dur-slow: .5s;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}