/*
 * SecureMedAssist brand primitives — single source of truth.
 *
 * Shared by both surfaces: the static landing (public/styles.css) and the
 * React SPA (src/styles/app.css auth theme + src/styles/dashboard.css). Served
 * verbatim from Storage $web at /tokens.css and linked from index.html,
 * terms.html, and app.html so both build pipelines stay independent.
 *
 * Only brand PRIMITIVES live here. Surface-specific theme roles (light
 * dashboard neutrals, landing layout tokens, auth muted text) stay scoped to
 * their own stylesheets.
 */
:root {
  /* ---- Color primitives ---- */
  --navy: #0D2040;
  --navy-deep: #091830;
  --teal: #2A7A85;
  --teal-dark: #226069;
  --teal-bright: #5FB5BF;
  --off-white: #F6F4EF;
  --gold: #B8935A;
  --ink: #1C2B36;

  /* ---- Semantic colors (derived from the brand palette) ---- */
  --success: #15803d;
  --success-bg: #f0fdf4;
  --warning: #92400e;
  --warning-bg: #fffbeb;
  --danger-strong: #b91c1c;
  --danger-bg: #fef2f2;
  --info: var(--teal-dark);
  --info-bg: #eef6f7;

  /* ---- Radius scale ---- */
  --radius-sm: 6px;   /* pills, small chips, inline inputs */
  --radius-md: 8px;   /* buttons, inputs */
  --radius-lg: 12px;  /* cards, panels */
  --radius-xl: 16px;  /* modals, hero cards */

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(13, 32, 64, 0.06), 0 1px 3px rgba(13, 32, 64, 0.08);
  --shadow-2: 0 4px 12px rgba(13, 32, 64, 0.10);
  --shadow-3: 0 16px 40px rgba(13, 32, 64, 0.18);

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---- Type scale ---- */
  --text-display: 600 28px/1.2 inherit;
  --text-h1: 600 22px/1.3 inherit;
  --text-h2: 600 17px/1.35 inherit;
  --text-body: 400 15px/1.5 inherit;
  --text-caption: 400 13px/1.4 inherit;

  /* ---- Focus ring (one ring everywhere) ---- */
  --focus-ring: 0 0 0 3px rgba(42, 122, 133, 0.3);
}