/* ============================================================
   Stay Connected+ — Design Tokens
   Single source of truth. Import this first in every page.
   ============================================================ */

:root {
  /* ---------- Colors ---------- */
  --color-primary: #0F172A;
  --color-on-primary: #FFFFFF;
  --color-secondary: #334155;

  /* Journey 1 — Loved Ones (Emerald) */
  --color-j1-accent: #059669;
  --color-j1-accent-hover: #047857;
  --color-j1-accent-light: #D1FAE5;
  --color-j1-accent-bg: #ECFDF5;

  /* Journey 2 — Outside Users (Blue) */
  --color-j2-accent: #0369A1;
  --color-j2-accent-hover: #075985;
  --color-j2-accent-light: #DBEAFE;
  --color-j2-accent-bg: #EFF6FF;

  --color-background: #F8FAFC;
  --color-foreground: #020617;
  --color-card: #FFFFFF;
  --color-card-foreground: #020617;
  --color-muted: #E8ECF1;
  --color-muted-foreground: #64748B;
  --color-border: #E2E8F0;
  --color-destructive: #DC2626;
  --color-ring: #0369A1;

  /* ---------- Typography ---------- */
  --font-heading: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.25rem;     /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 1.875rem;   /* 30 */
  --text-4xl: 2.25rem;    /* 36 */
  --text-5xl: 3rem;       /* 48 */
  --text-6xl: 3.75rem;    /* 60 */

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* ---------- Spacing (4pt scale) ---------- */
  --space-1: 0.25rem;     /* 4 */
  --space-2: 0.5rem;      /* 8 */
  --space-3: 0.75rem;     /* 12 */
  --space-4: 1rem;        /* 16 */
  --space-5: 1.25rem;     /* 20 */
  --space-6: 1.5rem;      /* 24 */
  --space-8: 2rem;        /* 32 */
  --space-10: 2.5rem;     /* 40 */
  --space-12: 3rem;       /* 48 */
  --space-16: 4rem;       /* 64 */
  --space-20: 5rem;       /* 80 */
  --space-24: 6rem;       /* 96 */

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-focus: 0 0 0 3px rgba(3, 105, 161, 0.35);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 800px;

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}