/* ============================================================
   ColonSmart — Shared Design Tokens
   ------------------------------------------------------------
   Brand palette + spacing + radius + shadow primitives used
   across every page. Import this FIRST, then page styles.
   Future devs: add new tokens here, don't hardcode hex values
   in component CSS.
   ============================================================ */

:root {
  /* ---- Brand color palette ---- */
  --navy:        #0B1F33; /* deep navy — primary text, dark sections */
  --teal:        #1F9A9A; /* medical teal — primary brand / CTAs */
  --teal-700:    #167a7a; /* darker teal for hovers */
  --mint:        #E9F7F5; /* soft mint — section tints, surfaces */
  --ivory:       #FAF7F1; /* warm ivory — page background */
  --slate:       #475569; /* slate — secondary text */
  --slate-400:   #64748B; /* muted text */
  --border:      #E2E8F0; /* light border / hairlines */
  --coral:       #F9735B; /* soft coral — ALERTS ONLY, never decorative */
  --coral-tint:  #FDEDE9; /* coral wash for alert surfaces */
  --white:       #FFFFFF;

  /* ---- Radii ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Soft, premium shadows (low spread, layered) ---- */
  --shadow-sm: 0 1px 2px rgba(11,31,51,.04), 0 2px 6px rgba(11,31,51,.05);
  --shadow-md: 0 4px 12px rgba(11,31,51,.06), 0 12px 28px rgba(11,31,51,.06);
  --shadow-lg: 0 8px 24px rgba(11,31,51,.08), 0 24px 60px rgba(11,31,51,.10);

  /* ---- Spacing scale (8pt base) ---- */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  /* ---- Easing ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
}