/**
 * BHARAT SWASTHYA SETU — PREMIUM DESIGN SYSTEM
 * 
 * World-class healthcare platform design language
 * Inspired by: Apple Health, Stripe, Linear, Material 3, One Medical
 * 
 * Philosophy:
 * - Less UI, More whitespace
 * - Less borders, More elevation
 * - Less colors, Better hierarchy
 * - Less clutter, Better focus
 */

:root {
  color-scheme: light;
  
  /* ═══════════════════════════════════════════════════════════
     PREMIUM COLOR SYSTEM — LIGHT THEME
     ═══════════════════════════════════════════════════════════ */
  
  /* Background Hierarchy */
  --ds-bg-app: #F3F6F9;              /* Main background — never flat white */
  --ds-bg-surface: #FFFFFF;          /* Card/panel background */
  --ds-bg-surface-secondary: #E8EEF4; /* Secondary surfaces */
  --ds-bg-elevated: #FBFCFE;         /* Floating elements */
  
  /* Borders */
  --ds-border-subtle: #DDE5EE;
  --ds-border-medium: #C9D4E0;
  --ds-border-strong: #B8C4D2;
  
  /* ─────────────────────────────────────────────
     3-COLOR BRAND SYSTEM (used sitewide, both themes)
     Primary   → Deep Medical Blue (CTAs, links, focus)
     Secondary → Professional Navy (chrome, secondary)
     Tertiary  → Emerald (verified/health/success)
     Soft Cyan → trust / verified secondary
     ───────────────────────────────────────────── */

  /* Primary — Deep Medical Blue */
  --ds-primary: #0F4C81;
  --ds-primary-hover: #0A3A66;
  --ds-primary-soft: rgba(15, 76, 129, 0.08);
  --ds-primary-glow: rgba(15, 76, 129, 0.18);
  /* Solid button-background variant: stays dark enough for white text
     contrast even when --ds-primary is lightened for dark-theme readability. */
  --ds-primary-solid: #0F4C81;

  /* Secondary — professional navy, used for secondary buttons/chrome */
  --ds-secondary: #0F1A2A;
  --ds-secondary-hover: #0A1220;
  --ds-secondary-soft: rgba(15, 26, 42, 0.06);
  --ds-secondary-glow: rgba(15, 26, 42, 0.12);

  /* Tertiary — emerald trust accent (verified/health/success) */
  --ds-medical: #0F8A6B;
  --ds-medical-hover: #0B6E55;
  --ds-medical-soft: rgba(15, 138, 107, 0.08);
  --ds-medical-glow: rgba(15, 138, 107, 0.18);
  --ds-tertiary: var(--ds-medical);
  --ds-tertiary-hover: var(--ds-medical-hover);
  --ds-tertiary-soft: var(--ds-medical-soft);
  --ds-tertiary-glow: var(--ds-medical-glow);
  --ds-medical-solid: #0D7A5F;
  --ds-tertiary-solid: var(--ds-medical-solid);
  --ds-success: var(--ds-medical);
  --ds-success-hover: var(--ds-medical-hover);
  --ds-success-soft: var(--ds-medical-soft);
  --ds-success-solid: var(--ds-medical-solid);

  /* Verified — Soft Cyan, deliberately distinct from Success emerald */
  --ds-verified: #1A9BB5;
  --ds-verified-hover: #147E94;
  --ds-verified-soft: rgba(26, 155, 181, 0.08);
  --ds-verified-glow: rgba(26, 155, 181, 0.18);
  --ds-verified-solid: #147E94;

  /* Info — calm sky blue, distinct hue-lean from Primary */
  --ds-info: #1E88C7;
  --ds-info-hover: #15628F;
  --ds-info-soft: rgba(30, 136, 199, 0.08);
  --ds-info-solid: #1B74A9;

  /* Queue / live-status — calm violet, distinct from all of the above */
  --ds-queue: #6D5FD1;
  --ds-queue-hover: #5A4CBD;
  --ds-queue-soft: rgba(109, 95, 209, 0.08);
  --ds-queue-solid: #5A4CBD;

  /* Error — muted brick red for validation/failure (distinct from Emergency) */
  --ds-error: #C6483F;
  --ds-error-hover: #B03B33;
  --ds-error-soft: rgba(198, 72, 63, 0.08);
  --ds-error-solid: #B03B33;

  /* Emergency (semantic only — warm coral, never decorative) */
  --ds-emergency: #E8654A;
  --ds-emergency-hover: #D6543B;
  --ds-emergency-soft: rgba(232, 101, 74, 0.08);
  --ds-emergency-glow: rgba(232, 101, 74, 0.28);
  --ds-emergency-solid: #C4503A;
  
  /* Warning (semantic only) — warm amber/gold, not neon */
  --ds-warning: #C9891C;
  --ds-warning-hover: #B4790F;
  --ds-warning-soft: rgba(201, 137, 28, 0.1);
  --ds-warning-solid: #9C6A0D;
  
  /* Text Hierarchy */
  --ds-text-primary: #111A2C;
  --ds-text-secondary: #5A6474;
  --ds-text-tertiary: #8892A3;
  --ds-text-inverse: #FFFFFF;
  --ds-text-on-primary: #FFFFFF;
  
  /* ═══════════════════════════════════════════════════════════
     TYPOGRAPHY SCALE — PREMIUM HEALTHCARE
     ═══════════════════════════════════════════════════════════ */
  
  /* Display/Hero Scale */
  --ds-text-hero: clamp(3.75rem, 5vw, 4.5rem);    /* 60-72px */
  --ds-text-section: clamp(2.25rem, 3vw, 2.75rem); /* 36-44px */
  --ds-text-title: clamp(1.375rem, 2vw, 1.625rem); /* 22-26px */
  
  /* Body Scale */
  --ds-text-body-lg: 1.125rem;     /* 18px */
  --ds-text-body: 1rem;            /* 16px */
  --ds-text-body-sm: 0.9375rem;    /* 15px */
  
  /* UI Scale */
  --ds-text-caption: 0.875rem;     /* 14px */
  --ds-text-button: 1rem;          /* 16px */
  --ds-text-label: 0.8125rem;      /* 13px */
  --ds-text-micro: 0.75rem;        /* 12px */
  
  /* Line Heights */
  --ds-leading-hero: 1.05;
  --ds-leading-section: 1.15;
  --ds-leading-title: 1.3;
  --ds-leading-body: 1.6;
  --ds-leading-relaxed: 1.7;
  
  /* Font Weights */
  --ds-weight-light: 300;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-weight-extrabold: 800;
  --ds-weight-black: 900;
  
  /* Letter Spacing */
  --ds-tracking-tighter: -0.04em;
  --ds-tracking-tight: -0.02em;
  --ds-tracking-normal: 0;
  --ds-tracking-wide: 0.02em;
  --ds-tracking-wider: 0.04em;
  
  /* ═══════════════════════════════════════════════════════════
     8-POINT SPACING SYSTEM
     ═══════════════════════════════════════════════════════════ */
  
  --ds-space-1: 0.5rem;    /* 8px */
  --ds-space-2: 1rem;      /* 16px */
  --ds-space-3: 1.5rem;    /* 24px */
  --ds-space-4: 2rem;      /* 32px */
  --ds-space-5: 2.5rem;    /* 40px */
  --ds-space-6: 3rem;      /* 48px */
  --ds-space-8: 4rem;      /* 64px */
  --ds-space-12: 6rem;     /* 96px */
  --ds-space-16: 8rem;     /* 128px */
  
  /* Micro spacing */
  --ds-space-0-5: 0.25rem; /* 4px */
  --ds-space-1-5: 0.75rem; /* 12px */
  
  /* ═══════════════════════════════════════════════════════════
     4-LEVEL ELEVATION SYSTEM
     ═══════════════════════════════════════════════════════════ */
  
  /* Level 0: Flat (on surface) */
  --ds-elevation-flat: none;
  --ds-elevation-flat-bg: var(--ds-bg-surface);
  
  /* Level 1: Surface (cards, panels) */
  --ds-elevation-surface: 0 1px 2px rgba(15, 23, 42, 0.03),
                          0 2px 4px rgba(15, 23, 42, 0.02);
  --ds-elevation-surface-bg: var(--ds-bg-surface);
  
  /* Level 2: Raised (important cards, popovers) */
  --ds-elevation-raised: 0 2px 4px rgba(15, 23, 42, 0.04),
                         0 8px 16px rgba(15, 23, 42, 0.06),
                         0 16px 32px rgba(15, 23, 42, 0.04);
  --ds-elevation-raised-bg: var(--ds-bg-surface);
  
  /* Level 3: Floating (modals, tooltips, floating nav) */
  --ds-elevation-floating: 0 4px 8px rgba(15, 23, 42, 0.05),
                           0 12px 24px rgba(15, 23, 42, 0.08),
                           0 24px 48px rgba(15, 23, 42, 0.10);
  --ds-elevation-floating-bg: var(--ds-bg-elevated);
  
  /* Hover States */
  --ds-elevation-hover-lift: 0 8px 16px rgba(15, 23, 42, 0.08),
                             0 16px 32px rgba(15, 23, 42, 0.10);
  
  /* ═══════════════════════════════════════════════════════════
     BORDER RADIUS SYSTEM
     ═══════════════════════════════════════════════════════════ */
  
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-2xl: 20px;
  --ds-radius-3xl: 24px;
  --ds-radius-full: 9999px;
  
  /* ═══════════════════════════════════════════════════════════
     PREMIUM ANIMATIONS
     ═══════════════════════════════════════════════════════════ */
  
  --ds-duration-instant: 100ms;
  --ds-duration-fast: 200ms;
  --ds-duration-normal: 300ms;
  --ds-duration-slow: 500ms;
  
  --ds-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-ease-premium: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* ═══════════════════════════════════════════════════════════
     GLASS MORPHISM
     ═══════════════════════════════════════════════════════════ */
  
  --ds-glass-bg: rgba(255, 255, 255, 0.7);
  --ds-glass-border: rgba(255, 255, 255, 0.2);
  --ds-glass-blur: 20px;
  --ds-glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}

/* ═══════════════════════════════════════════════════════════
   DARK THEME — INDEPENDENT DESIGN
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  color-scheme: dark;
  
  /* Background Hierarchy — NOT an inversion of light: deep navy-charcoal
     layers (never pure black), so surfaces still read as calm and premium. */
  --ds-bg-app: #0D1420;
  --ds-bg-surface: #16202E;
  --ds-bg-surface-secondary: #131C29;
  --ds-bg-elevated: #1E2A3A;
  --ds-bg-card: #1A2532;
  
  /* Borders */
  --ds-border-subtle: #263447;
  --ds-border-medium: #324259;
  --ds-border-strong: #46586F;
  
  /* Primary — lightened medical blue, still calm (not neon) */
  --ds-primary: #6BA3D4;
  --ds-primary-hover: #8BB8DF;
  --ds-primary-soft: rgba(107, 163, 212, 0.14);
  --ds-primary-glow: rgba(107, 163, 212, 0.25);
  /* Solid button-background variant: darker/more saturated than --ds-primary
     so white button text keeps AA-friendly contrast in dark mode. */
  --ds-primary-solid: #0F4C81;

  /* Secondary — neutral, adjusted for dark */
  --ds-secondary: #E4E9F1;
  --ds-secondary-hover: #FFFFFF;
  --ds-secondary-soft: rgba(228, 233, 241, 0.1);
  --ds-secondary-glow: rgba(228, 233, 241, 0.18);

  /* Tertiary — elegant emerald trust accent, lightened for dark bg */
  --ds-medical: #3FBF95;
  --ds-medical-hover: #63D1AC;
  --ds-medical-soft: rgba(63, 191, 149, 0.14);
  --ds-medical-glow: rgba(63, 191, 149, 0.25);
  --ds-tertiary: var(--ds-medical);
  --ds-tertiary-hover: var(--ds-medical-hover);
  --ds-tertiary-soft: var(--ds-medical-soft);
  --ds-tertiary-glow: var(--ds-medical-glow);
  --ds-medical-solid: #0F8A6B;
  --ds-tertiary-solid: var(--ds-medical-solid);
  --ds-success: var(--ds-medical);
  --ds-success-hover: var(--ds-medical-hover);
  --ds-success-soft: var(--ds-medical-soft);
  --ds-success-solid: var(--ds-medical-solid);

  /* Verified — Soft Cyan, distinct from Success emerald */
  --ds-verified: #4DB8CC;
  --ds-verified-hover: #6ECADB;
  --ds-verified-soft: rgba(77, 184, 204, 0.14);
  --ds-verified-glow: rgba(77, 184, 204, 0.25);
  --ds-verified-solid: #1A9BB5;

  /* Info — calm sky blue */
  --ds-info: #6FC2ED;
  --ds-info-hover: #9AD8F5;
  --ds-info-soft: rgba(111, 194, 237, 0.16);
  --ds-info-solid: #1B74A9;

  /* Queue / live-status — calm violet */
  --ds-queue: #A79AF0;
  --ds-queue-hover: #C0B6F5;
  --ds-queue-soft: rgba(167, 154, 240, 0.18);
  --ds-queue-solid: #5A4CBD;

  /* Error — muted brick red, lightened for dark bg (distinct from Emergency) */
  --ds-error: #E68A82;
  --ds-error-hover: #F0A69F;
  --ds-error-soft: rgba(230, 138, 130, 0.16);
  --ds-error-solid: #B03B33;

  /* Emergency — warm coral, lightened for dark bg */
  --ds-emergency: #F5977E;
  --ds-emergency-hover: #F8AF9B;
  --ds-emergency-soft: rgba(245, 151, 126, 0.16);
  --ds-emergency-glow: rgba(245, 151, 126, 0.3);
  --ds-emergency-solid: #C4503A;
  
  /* Warning */
  --ds-warning: #E8B858;
  --ds-warning-hover: #F0C87E;
  --ds-warning-soft: rgba(232, 184, 88, 0.16);
  --ds-warning-solid: #9C6A0D;
  
  /* Text Hierarchy — soft off-white, never pure #FFFFFF for body copy */
  --ds-text-primary: #F1F4F9;
  --ds-text-secondary: #B9C4D3;
  --ds-text-tertiary: #8896A8;
  --ds-text-inverse: #0D1420;
  --ds-text-on-primary: #FFFFFF;
  
  /* Elevation — Darker shadows */
  --ds-elevation-surface: 0 1px 2px rgba(0, 0, 0, 0.2),
                          0 2px 4px rgba(0, 0, 0, 0.15);
  
  --ds-elevation-raised: 0 2px 4px rgba(0, 0, 0, 0.25),
                         0 8px 16px rgba(0, 0, 0, 0.2),
                         0 16px 32px rgba(0, 0, 0, 0.15);
  
  --ds-elevation-floating: 0 4px 8px rgba(0, 0, 0, 0.3),
                           0 12px 24px rgba(0, 0, 0, 0.25),
                           0 24px 48px rgba(0, 0, 0, 0.20);
  
  --ds-elevation-hover-lift: 0 8px 16px rgba(0, 0, 0, 0.3),
                             0 16px 32px rgba(0, 0, 0, 0.25);
  
  /* Glass Morphism — Dark */
  --ds-glass-bg: rgba(22, 32, 46, 0.7);
  --ds-glass-border: rgba(255, 255, 255, 0.1);
  --ds-glass-blur: 24px;
  --ds-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM COMPONENT FOUNDATIONS
   ═══════════════════════════════════════════════════════════ */

/* Card Elevation Classes */
.ds-elevation-flat {
  box-shadow: var(--ds-elevation-flat);
  background: var(--ds-elevation-flat-bg);
}

.ds-elevation-surface {
  box-shadow: var(--ds-elevation-surface);
  background: var(--ds-elevation-surface-bg);
  border: 1px solid var(--ds-border-subtle);
}

.ds-elevation-raised {
  box-shadow: var(--ds-elevation-raised);
  background: var(--ds-elevation-raised-bg);
  border: 1px solid var(--ds-border-subtle);
}

.ds-elevation-floating {
  box-shadow: var(--ds-elevation-floating);
  background: var(--ds-elevation-floating-bg);
  border: 1px solid var(--ds-border-subtle);
}

/* Hover Elevation Transitions */
.ds-hover-lift {
  transition: box-shadow var(--ds-duration-fast) var(--ds-ease-smooth),
              transform var(--ds-duration-fast) var(--ds-ease-smooth);
}

.ds-hover-lift:hover {
  box-shadow: var(--ds-elevation-hover-lift);
  transform: translateY(-2px);
}

/* Glass Morphism */
.ds-glass {
  background: var(--ds-glass-bg);
  backdrop-filter: blur(var(--ds-glass-blur));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
  border: 1px solid var(--ds-glass-border);
  box-shadow: var(--ds-glass-shadow);
}

/* Typography Utilities */
.ds-text-hero {
  font-size: var(--ds-text-hero);
  line-height: var(--ds-leading-hero);
  font-weight: var(--ds-weight-extrabold);
  letter-spacing: var(--ds-tracking-tighter);
  color: var(--ds-text-primary);
}

.ds-text-section {
  font-size: var(--ds-text-section);
  line-height: var(--ds-leading-section);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-text-primary);
}

.ds-text-title {
  font-size: var(--ds-text-title);
  line-height: var(--ds-leading-title);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-primary);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}