/* =============================================================================
   CuraSuite Design Tokens
   Single source of truth for all visual properties.
   Based on the CuraSuite Design System v1.0
   ============================================================================= */

:root {
  /* ── Brand Colors ─────────────────────────────────────────────────────────── */

  /* Primary — Healthcare Blue */
  --color-primary-50:  #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-700: #1D4ED8;
  --color-primary-800: #1E40AF;
  --color-primary-900: #1E3A8A;

  /* Secondary — Medical Green */
  --color-secondary-50:  #F0FDF4;
  --color-secondary-100: #DCFCE7;
  --color-secondary-500: #22C55E;
  --color-secondary-600: #16A34A;
  --color-secondary-700: #15803D;
  --color-secondary-800: #166534;

  /* Accent — Warm Orange (CTAs) */
  --color-accent-50:  #FFF7ED;
  --color-accent-100: #FFEDD5;
  --color-accent-400: #FB923C;
  --color-accent-500: #F97316;
  --color-accent-600: #EA580C;
  --color-accent-700: #C2410C;

  /* Semantic Colors */
  --color-success-bg:     #F0FDF4;
  --color-success-border: #86EFAC;
  --color-success-text:   #166534;
  --color-success:        #16A34A;

  --color-warning-bg:     #FFFBEB;
  --color-warning-border: #FCD34D;
  --color-warning-text:   #92400E;
  --color-warning:        #D97706;

  --color-error-bg:     #FEF2F2;
  --color-error-border: #FECACA;
  --color-error-text:   #991B1B;
  --color-error:        #DC2626;

  --color-info-bg:     #EFF6FF;
  --color-info-border: #BFDBFE;
  --color-info-text:   #1E40AF;
  --color-info:        #2563EB;

  /* ── Neutral Palette ──────────────────────────────────────────────────────── */
  --color-white:   #FFFFFF;
  --color-gray-50: #F9FAFB;
  --color-gray-100:#F3F4F6;
  --color-gray-200:#E5E7EB;
  --color-gray-300:#D1D5DB;
  --color-gray-400:#9CA3AF;
  --color-gray-500:#6B7280;
  --color-gray-600:#4B5563;
  --color-gray-700:#374151;
  --color-gray-800:#1F2937;
  --color-gray-900:#111827;
  --color-black:   #000000;

  /* ── Semantic Surface Aliases (light mode) ───────────────────────────────── */
  --surface-page:   var(--color-white);
  --surface-card:   var(--color-gray-50);
  --surface-raised: var(--color-white);
  --surface-overlay:rgba(0, 0, 0, 0.5);

  --text-primary:   var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-muted:     var(--color-gray-400);
  --text-inverse:   var(--color-white);
  --text-link:      var(--color-primary-600);

  --border-default: var(--color-gray-200);
  --border-strong:  var(--color-gray-300);
  --border-focus:   var(--color-primary-500);

  /* ── Typography ───────────────────────────────────────────────────────────── */
  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'Fira Code', 'Cascadia Code', ui-monospace, 'Courier New', monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.75;

  --font-normal: 400;
  --font-medium: 500;
  --font-semi:   600;
  --font-bold:   700;

  /* ── Spacing (8px grid) ───────────────────────────────────────────────────── */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ── Border Radius ────────────────────────────────────────────────────────── */
  --radius-sm:   0.25rem;  /* 4px  */
  --radius:      0.5rem;   /* 8px  */
  --radius-md:   0.75rem;  /* 12px */
  --radius-lg:   1rem;     /* 16px */
  --radius-xl:   1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:     0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ── Layout ───────────────────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;
  --content-width: 1280px;

  /* ── Z-index ──────────────────────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;

  /* ── Transitions ──────────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition:        200ms ease;
  --transition-slow:   300ms ease;
}

/* ── Dark Mode ─────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-page:   #0F172A;
    --surface-card:   #1E293B;
    --surface-raised: #1E293B;

    --text-primary:   #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted:     #64748B;

    --border-default: #1E293B;
    --border-strong:  #334155;
  }
}

.dark {
  --surface-page:   #0F172A;
  --surface-card:   #1E293B;
  --surface-raised: #1E293B;
  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;
  --border-default: #1E293B;
  --border-strong:  #334155;
}