/**
 * =============================================================================
 * HOSPITAL FE — DESIGN TOKEN SYSTEM
 * =============================================================================
 * Inspired by: open-design (nexu-io) DESIGN.md architecture
 * Theme: Medical Professional — Deep Ocean (Dark) / Clean Mint (Light)
 * =============================================================================
 * USAGE:
 *   Import this file FIRST in index.html before any other theme CSS.
 *   All tokens are available globally via CSS custom properties.
 *   Example: color: var(--color-text-primary);
 * =============================================================================
 */

/* =============================================================================
   1. BRAND PALETTE — Healthcare Color System
   ============================================================================= */
:root {
  /* Medical Blue (Primary Brand — Trust & Precision) */
  --palette-blue-50:  #eff6ff;
  --palette-blue-100: #dbeafe;
  --palette-blue-200: #bfdbfe;
  --palette-blue-300: #93c5fd;
  --palette-blue-400: #60a5fa;
  --palette-blue-500: #3b82f6;
  --palette-blue-600: #2563eb;
  --palette-blue-700: #1d4ed8;
  --palette-blue-800: #1e40af;
  --palette-blue-900: #1e3a8a;

  /* Emerald Health (Secondary — Growth & Vitality) */
  --palette-green-50:  #ecfdf5;
  --palette-green-100: #d1fae5;
  --palette-green-200: #a7f3d0;
  --palette-green-300: #6ee7b7;
  --palette-green-400: #34d399;
  --palette-green-500: #10b981;
  --palette-green-600: #059669;
  --palette-green-700: #047857;
  --palette-green-800: #065f46;
  --palette-green-900: #064e3b;

  /* Alert Red (Danger — Critical Care) */
  --palette-red-50:  #fff1f2;
  --palette-red-100: #ffe4e6;
  --palette-red-200: #fecdd3;
  --palette-red-400: #fb7185;
  --palette-red-500: #f43f5e;
  --palette-red-600: #e11d48;
  --palette-red-700: #be123c;

  /* Warning Amber (Caution — Pending States) */
  --palette-amber-50:  #fffbeb;
  --palette-amber-100: #fef3c7;
  --palette-amber-300: #fcd34d;
  --palette-amber-400: #fbbf24;
  --palette-amber-500: #f59e0b;
  --palette-amber-600: #d97706;
  --palette-amber-700: #b45309;

  /* Ocean (Deep backgrounds) */
  --palette-ocean-950: #020617;
  --palette-ocean-900: #040d12;
  --palette-ocean-800: #0c1920;
  --palette-ocean-700: #0f2030;
  --palette-ocean-600: #142638;

  /* Slate (Neutral text & borders) */
  --palette-slate-50:  #f8fafc;
  --palette-slate-100: #f1f5f9;
  --palette-slate-200: #e2e8f0;
  --palette-slate-300: #cbd5e1;
  --palette-slate-400: #94a3b8;
  --palette-slate-500: #64748b;
  --palette-slate-600: #475569;
  --palette-slate-700: #334155;
  --palette-slate-800: #1e293b;
  --palette-slate-900: #0f172a;
}

/* =============================================================================
   2. DARK THEME — Default (Deep Ocean & Forest)
   ============================================================================= */
:root {
  color-scheme: dark;

  /* ---- Backgrounds ---- */
  --color-bg-base:        var(--palette-ocean-900);   /* #040d12 — deepest bg */
  --color-bg-surface:     var(--palette-ocean-800);   /* #0c1920 — cards, panels */
  --color-bg-elevated:    var(--palette-ocean-700);   /* #0f2030 — modals, dropdowns */
  --color-bg-sidebar:     rgba(12, 25, 32, 0.88);
  --color-bg-header:      rgba(4, 13, 18, 0.92);
  --color-bg-overlay:     rgba(2, 6, 23, 0.75);

  /* ---- Text ---- */
  --color-text-primary:   var(--palette-slate-50);    /* #f8fafc */
  --color-text-secondary: var(--palette-slate-400);   /* #94a3b8 */
  --color-text-muted:     var(--palette-slate-500);   /* #64748b */
  --color-text-inverse:   var(--palette-slate-900);   /* for light buttons */
  --color-text-link:      var(--palette-blue-400);
  --color-text-link-hover:var(--palette-green-400);

  /* ---- Brand Accent ---- */
  --color-accent-primary: var(--palette-blue-500);    /* #3b82f6 */
  --color-accent-hover:   var(--palette-green-500);   /* #10b981 */
  --color-accent-subtle:  rgba(59, 130, 246, 0.12);
  --color-accent-glow:    rgba(59, 130, 246, 0.45);

  /* ---- Borders ---- */
  --color-border-default: rgba(38, 70, 90, 0.55);
  --color-border-subtle:  rgba(38, 70, 90, 0.35);
  --color-border-accent:  rgba(59, 130, 246, 0.5);
  --color-border-focus:   var(--palette-blue-400);

  /* ---- Status Colors ---- */
  --color-status-success-bg:   rgba(16, 185, 129, 0.15);
  --color-status-success-text: var(--palette-green-400);
  --color-status-success-border: rgba(16, 185, 129, 0.25);

  --color-status-warning-bg:   rgba(245, 158, 11, 0.15);
  --color-status-warning-text: var(--palette-amber-400);
  --color-status-warning-border: rgba(245, 158, 11, 0.25);

  --color-status-danger-bg:    rgba(244, 63, 94, 0.15);
  --color-status-danger-text:  var(--palette-red-400);
  --color-status-danger-border: rgba(244, 63, 94, 0.25);

  --color-status-info-bg:      rgba(59, 130, 246, 0.12);
  --color-status-info-text:    var(--palette-blue-400);
  --color-status-info-border:  rgba(59, 130, 246, 0.25);
}

/* =============================================================================
   3. LIGHT THEME — Opt-in via body.light-theme
   ============================================================================= */
body.light-theme {
  color-scheme: light;

  /* ---- Backgrounds ---- */
  --color-bg-base:        #f0f6f6;
  --color-bg-surface:     #ffffff;
  --color-bg-elevated:    #f8fffe;
  --color-bg-sidebar:     rgba(255, 255, 255, 0.95);
  --color-bg-header:      rgba(240, 246, 246, 0.95);
  --color-bg-overlay:     rgba(15, 23, 42, 0.45);

  /* ---- Text ---- */
  --color-text-primary:   var(--palette-slate-900);
  --color-text-secondary: var(--palette-slate-600);
  --color-text-muted:     var(--palette-slate-500);
  --color-text-inverse:   var(--palette-slate-50);
  --color-text-link:      var(--palette-blue-700);
  --color-text-link-hover:var(--palette-green-700);

  /* ---- Brand Accent ---- */
  --color-accent-primary: var(--palette-blue-700);    /* #1d4ed8 — darker for contrast */
  --color-accent-hover:   var(--palette-green-700);   /* #047857 */
  --color-accent-subtle:  rgba(29, 78, 216, 0.07);
  --color-accent-glow:    rgba(29, 78, 216, 0.3);

  /* ---- Borders ---- */
  --color-border-default: rgba(180, 200, 215, 0.75);
  --color-border-subtle:  rgba(200, 215, 225, 0.5);
  --color-border-accent:  rgba(29, 78, 216, 0.4);
  --color-border-focus:   var(--palette-blue-600);

  /* ---- Status Colors ---- */
  --color-status-success-bg:   rgba(16, 185, 129, 0.1);
  --color-status-success-text: var(--palette-green-700);
  --color-status-success-border: rgba(16, 185, 129, 0.2);

  --color-status-warning-bg:   rgba(217, 119, 6, 0.1);
  --color-status-warning-text: var(--palette-amber-700);
  --color-status-warning-border: rgba(217, 119, 6, 0.2);

  --color-status-danger-bg:    rgba(225, 29, 72, 0.08);
  --color-status-danger-text:  var(--palette-red-600);
  --color-status-danger-border: rgba(225, 29, 72, 0.2);

  --color-status-info-bg:      rgba(29, 78, 216, 0.08);
  --color-status-info-text:    var(--palette-blue-700);
  --color-status-info-border:  rgba(29, 78, 216, 0.2);
}

/* =============================================================================
   4. TYPOGRAPHY TOKENS
   ============================================================================= */
:root {
  /* Font Families */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:  'Outfit', 'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font Sizes (fluid scale, px base) */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   20px;
  --text-3xl:   24px;
  --text-4xl:   30px;
  --text-5xl:   36px;

  /* Font Weights */
  --font-light:    300;
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Letter Spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-caps:    0.08em;
}

/* =============================================================================
   5. SPACING TOKENS (4px base grid)
   ============================================================================= */
:root {
  --space-0:   0px;
  --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;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Semantic Spacing */
  --gap-xs:    var(--space-1);
  --gap-sm:    var(--space-2);
  --gap-md:    var(--space-4);
  --gap-lg:    var(--space-6);
  --gap-xl:    var(--space-8);
}

/* =============================================================================
   6. BORDER RADIUS TOKENS
   ============================================================================= */
:root {
  --radius-none:  0px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-3xl:   24px;
  --radius-full:  9999px;   /* pill shape */

  /* Semantic Radius */
  --radius-card:  var(--radius-xl);
  --radius-modal: var(--radius-2xl);
  --radius-badge: var(--radius-full);
  --radius-btn:   var(--radius-md);
  --radius-input: var(--radius-md);
  --radius-icon:  var(--radius-lg);
}

/* =============================================================================
   7. SHADOW TOKENS
   ============================================================================= */
:root {
  /* Dark theme shadows (deeper, blue-tinted) */
  --shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 16px 36px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.65);
  --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.75);

  --shadow-glow-sm: 0 0 8px var(--color-accent-glow);
  --shadow-glow-md: 0 0 20px var(--color-accent-glow);
  --shadow-glow-lg: 0 0 40px var(--color-accent-glow);

  --shadow-card: var(--shadow-sm);
  --shadow-modal: var(--shadow-xl);
  --shadow-dropdown: var(--shadow-md);
  --shadow-btn-hover: 0 4px 14px var(--color-accent-glow);
}

body.light-theme {
  --shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 16px 36px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.12);
  --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.14);
}

/* =============================================================================
   8. ANIMATION TOKENS
   ============================================================================= */
:root {
  /* Durations */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;

  /* Easing */
  --ease-linear:    linear;
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:    cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Semantic Transitions */
  --transition-fast:   var(--duration-fast)   var(--ease-out);
  --transition-normal: var(--duration-normal)  var(--ease-in-out);
  --transition-slow:   var(--duration-slow)   var(--ease-in-out);
  --transition-spring: var(--duration-normal)  var(--ease-spring);
}

/* =============================================================================
   9. LAYOUT TOKENS
   ============================================================================= */
:root {
  /* App Shell */
  --header-height:        60px;
  --sidebar-width:        250px;
  --sidebar-width-closed: 54px;
  --sidebar-mobile-width: 280px;

  /* Z-Index Scale */
  --z-base:       0;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-fixed:      300;
  --z-overlay:    400;
  --z-modal:      500;
  --z-popover:    600;
  --z-tooltip:    700;
  --z-toast:      800;
  --z-sidebar:    1050;
  --z-backdrop:   1040;
  --z-max:        9999;

  /* Content Max Width */
  --content-max-width: 1600px;
  --content-padding-x: 20px;

  /* Breakpoints (reference only — use in media queries) */
  --bp-xs:  480px;
  --bp-sm:  768px;
  --bp-md:  992px;
  --bp-lg:  1200px;
  --bp-xl:  1440px;
}

/* =============================================================================
   10. LEGACY BRIDGE — Map old DSF variables to new token system
       Backward compatibility for existing components that use --dsf-* or old vars
   ============================================================================= */
:root {
  /* Old styles.css variables → new tokens */
  --bg-primary:       var(--color-bg-base);
  --bg-surface:       var(--color-bg-surface);
  --bg-sidebar:       var(--color-bg-sidebar);
  --bg-header:        var(--color-bg-header);
  --text-primary:     var(--color-text-primary);
  --text-secondary:   var(--color-text-secondary);
  --border-color:     var(--color-border-default);
  --border-glow:      var(--color-accent-glow);
  --shadow-sm:        var(--shadow-sm);
  --shadow-lg:        var(--shadow-lg);
  --accent-primary:   var(--color-accent-primary);
  --accent-hover:     var(--color-accent-hover);
  --accent-bg:        var(--color-accent-subtle);

  --status-pending-bg:    var(--color-status-warning-bg);
  --status-pending-text:  var(--color-status-warning-text);
  --status-active-bg:     var(--color-status-success-bg);
  --status-active-text:   var(--color-status-success-text);
  --status-danger-bg:     var(--color-status-danger-bg);
  --status-danger-text:   var(--color-status-danger-text);

  /* DSF brand aliases */
  --dsf-primary:      var(--color-accent-primary);
  --dsf-accent:       var(--color-accent-primary);
  --dsf-navy:         var(--color-bg-header);
  --dsf-slate:        var(--color-bg-sidebar);
  --dsf-slate-light:  var(--color-accent-subtle);
  --dsf-text-primary: var(--color-text-primary);
  --dsf-text-muted:   var(--color-text-secondary);
  --dsf-border:       var(--color-border-default);
  --dsf-bg-light:     var(--color-bg-base);
}