/* ============================================
   BLOOD DONOR FINDER — Design Tokens
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

:root {
  /* ── Core Colors ── */
  --clr-primary:       #E53935;
  --clr-primary-light: #FF6B6B;
  --clr-primary-dark:  #B71C1C;
  --clr-secondary:     #1E293B;
  --clr-bg:            #F8FAFC;
  --clr-surface:       #FFFFFF;
  --clr-accent:        #22C55E;
  --clr-accent-dark:   #16A34A;
  --clr-warning:       #F59E0B;
  --clr-error:         #EF4444;

  /* ── Blood Group Colors ── */
  --bg-O:  #E53935;
  --bg-A:  #2563EB;
  --bg-B:  #7C3AED;
  --bg-AB: #059669;

  /* ── Text ── */
  --txt-primary:   #0F172A;
  --txt-secondary: #475569;
  --txt-muted:     #94A3B8;
  --txt-inverse:   #FFFFFF;

  /* ── Borders ── */
  --border-subtle: rgba(15,23,42,0.08);
  --border-medium: rgba(15,23,42,0.15);
  --border-strong: rgba(15,23,42,0.25);

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.15);
  --shadow-red: 0 8px 30px rgba(229,57,53,0.35);

  /* ── Spacing ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Border Radius ── */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* ── Typography ── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   150ms;
  --t-normal: 250ms;
  --t-slow:   400ms;

  /* ── Navbar ── */
  --navbar-h: 68px;

  /* ── Z-index ── */
  --z-sticky: 100;
  --z-modal:  200;
  --z-toast:  300;
  --z-top:    400;
}

/* ── Dark Mode Overrides ── */
[data-theme="dark"] {
  --clr-bg:        #0D1117;
  --clr-surface:   #161B22;
  --txt-primary:   #F1F5F9;
  --txt-secondary: #94A3B8;
  --txt-muted:     #475569;
  --border-subtle: rgba(255,255,255,0.06);
  --border-medium: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.20);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.5);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.6);
}