/* Basma design system tokens — sampled from the logo, clinic mural and social posts. */
:root {
  /* Color */
  --surface: #ffffff;
  --canvas: #f6f2f1;
  --line: #e4dcd9;
  --basma-blue: #1577bc;
  --navy: #004884;
  --plum: #6c5272;
  --smile: #b0183c;
  --star-gold: #d0a048;
  --gold-text: #8a6418;
  --ink: #2f3a45;
  --ink-muted: #5f6b78;
  --on-brand: #ffffff;
  --tangerine: #e89044;
  --tangerine-text: #a8520f;
  --sky: #40a8d0;
  --sky-text: #1b6f93;
  --sunshine: #f8d850;
  --lime: #c0d078;
  --blush: #e8c8d0;
  --coral: #e89898;
  --ice: #c0e0e8;

  /* Type */
  --font-display: Fredoka, "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-sans: Montserrat, "Segoe UI", system-ui, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-soft: 0 6px 20px rgba(0, 72, 132, 0.1);

  /* Layout */
  --container: 1200px;
}