@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --primary-50:  #e0f2fe;
  --primary-200: #7dd3fc;
  --primary-500: #0582ca;
  --primary-700: #0369a1;
  --primary-900: #0c4a6e;

  --accent-50:   #fff7ed;
  --accent-200:  #fdba74;
  --accent-500:  #f97316;
  --accent-700:  #c2410c;
  --accent-900:  #7c2d12;

  --neutral-50:  #fafaf9;
  --neutral-100: #f5f0e8;
  --neutral-200: #e8e2d8;
  --neutral-300: #d6d3ce;
  --neutral-400: #a8a29e;
  --neutral-500: #78716c;
  --neutral-700: #44403c;
  --neutral-900: #1c1917;

  --success:    #22c55e; --success-bg: #dcfce7;
  --warning:    #f59e0b; --warning-bg: #fef3c7;
  --danger:     #ef4444; --danger-bg:  #fee2e2;
  --info:       #06b6d4; --info-bg:    #e0f7fa;

  --color-bg:      var(--neutral-100);
  --color-surface: #ffffff;
  --color-border:  var(--neutral-200);
  --color-text:    var(--neutral-900);
  --color-muted:   var(--neutral-500);

  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 20px;  --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
}