/* ==========================================================
   DESIGN TOKENS
========================================================== */

:root {
  /* Width */
  --container-width: 820px;

  /* Colors */

  --bg: #f7fafc;

  --surface: #ffffff;

  --surface-soft: #fbfdff;

  --border: #dbe7f1;

  --primary: #23628f;

  --primary-hover: #184b70;

  --primary-soft: #e8f2fa;

  --text: #243746;

  --text-soft: #6f7d8b;

  --success: #3d8b68;

  /* Radius */

  --radius-xs: 8px;

  --radius-sm: 12px;

  --radius-md: 18px;

  --radius-lg: 28px;

  /* Shadows */

  --shadow-card: 0 8px 30px rgba(20, 40, 60, 0.05);

  --shadow-hover: 0 18px 50px rgba(20, 40, 60, 0.08);

  /* Spacing */

  --space-1: 8px;

  --space-2: 16px;

  --space-3: 24px;

  --space-4: 32px;

  --space-5: 48px;

  --space-6: 64px;
}