/* ============================================================
   variables.css — Design tokens (colors, radii, shadows, spacing)
   ============================================================ */
:root {
  /* Brand */
  --primary: #065F46;
  --primary-light: #059669;
  --primary-pale: #D1FAE5;
  --primary-surface: #ECFDF5;

  --accent: #D97706;
  --accent-light: #F59E0B;
  --accent-pale: #FEF3C7;

  /* Surfaces */
  --bg: #FAF8F5;
  --surface: #FFFFFF;
  --surface-2: #F3F0EB;

  /* Text (darkened --text-3 for WCAG AA on 11px hints) */
  --text: #111827;
  --text-2: #4B5563;
  --text-3: #6B7280;            /* was #9CA3AF — improved contrast */

  /* Lines */
  --border: #E5E7EB;
  --divider: #F3F4F6;

  /* Status */
  --error: #DC2626;
  --error-bg: #FEF2F2;
  --success: #16A34A;
  --success-bg: #F0FDF4;
  --warn: #EA580C;
  --warn-bg: #FFF7ED;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .03);

  /* Radii */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 8px;

  /* Layout metrics */
  --nav-h: 64px;
  --header-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* App width */
  --shell-max: 480px;

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--primary-pale);
}