/* ============================================================================
   CareLink — design tokens
   ----------------------------------------------------------------------------
   Ported from the admin portal's theme (admin/lib/theme.ts) so the marketing
   site, the admin portal and the mobile app (mobile/constants/Brand.ts) all
   speak the same visual language.

   Structure — neutrals, radii, shadows, focus ring — comes from Twilio Paste
   design tokens, exactly as the admin theme consumes them. Brand identity comes
   from the CareLink Brand Guidelines.

   When this site moves to a framework, this file is the theme object: every
   value below has a direct counterpart in admin/lib/theme.ts.
   ========================================================================== */

:root {
  /* ── Brand palette ─────────────────────────────────────────────────────── */
  --cl-navy: #163b93; /* primary — Cobalt Blue */
  --cl-navy-light: #4864b8;
  --cl-navy-dark: #0f2a6b;
  --cl-coral: #f79a93; /* secondary — Light Coral */
  --cl-coral-light: #fbc3bd;
  --cl-coral-dark: #e0655c; /* use on light surfaces — the base coral fails contrast */
  --cl-amber: #ffa800; /* accent — Amber Yellow */
  --cl-amber-light: #ffc24d;
  --cl-amber-dark: #c97f00;
  /* Text-safe step below amber-dark, same hue. The brand amber manages only
     1.7:1 on cream and amber-dark 2.9:1 — both under the 3:1 large-text bar —
     so amber as *type* on a light surface has to come from here (3.6:1 on
     cream, 4.0:1 on white). Amber itself stays fine for fills and marks. */
  --cl-amber-deep: #b37100;
  --cl-cream: #fef0e5; /* soft brand surface tint */

  /* ── Paste neutrals (admin `paste.*`) ──────────────────────────────────── */
  --cl-white: #ffffff; /* gray-0  */
  --cl-gray-10: #f4f4f6; /* body background   */
  --cl-gray-20: #e1e3ea; /* weak border       */
  --cl-gray-30: #cacdd8; /* border            */
  --cl-gray-40: #8b93aa; /* strong border     */
  --cl-gray-60: #606b85; /* weak text         */
  --cl-gray-90: #1f304c; /* dark surface      */
  --cl-gray-100: #121c2d; /* text             */

  /* ── Semantic aliases ──────────────────────────────────────────────────── */
  --cl-surface: var(--cl-white);
  --cl-surface-sunken: var(--cl-gray-10);
  --cl-surface-brand: var(--cl-navy);
  --cl-surface-tint: var(--cl-cream);
  --cl-text: var(--cl-gray-100);
  --cl-text-weak: var(--cl-gray-60);
  --cl-text-on-brand: var(--cl-white);
  --cl-border: var(--cl-gray-20);
  --cl-border-strong: var(--cl-gray-30);
  --cl-link: var(--cl-navy);

  /* ── Radii (Paste borderRadius20/30/40/pill) ───────────────────────────── */
  --cl-radius-input: 4px;
  --cl-radius-button: 8px;
  --cl-radius-card: 12px;
  --cl-radius-pill: 100px;

  /* ── Elevation + focus (Paste shadowLow / shadowHigh, brand-tinted ring) ─ */
  --cl-shadow-low: 0 2px 8px rgba(18, 28, 45, 0.1);
  --cl-shadow-high: 0 16px 24px rgba(18, 28, 45, 0.2);
  --cl-focus-ring: 0 0 0 4px rgba(22, 59, 147, 0.4);

  /* ── Interaction tints (admin palette.action) ──────────────────────────── */
  --cl-hover-tint: rgba(22, 59, 147, 0.04);
  --cl-hover-tint-strong: rgba(22, 59, 147, 0.08);

  /* ── Spacing — 8px scale, same steps as the admin theme's sx values ────── */
  --cl-space-1: 4px;
  --cl-space-2: 8px;
  --cl-space-3: 12px;
  --cl-space-4: 16px;
  --cl-space-5: 24px;
  --cl-space-6: 32px;
  --cl-space-7: 48px;
  --cl-space-8: 64px;
  --cl-space-9: 96px;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --cl-container: 1200px;
  --cl-container-narrow: 820px; /* legal + long-form reading measure */
  --cl-gutter: var(--cl-space-5);
  --cl-section-y: clamp(56px, 7vw, 96px);
  --cl-header-h: 56px;

  /* ── Motion (admin transitions: 120ms controls / 160ms surfaces) ───────── */
  --cl-transition-control: 120ms ease;
  --cl-transition-surface: 160ms ease;
}