@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* ----------------------------------------------------
     Mode 1: Light — Daylight Clinical
     ---------------------------------------------------- */
  :root,
  [data-theme="light"] {
    --bg-app: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-surface-elevated: #F1F5F9;
    --bg-surface-hover: #E2E8F0;
    --bg-overlay: rgba(15, 23, 42, 0.4);

    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-muted: #64748B;
    --text-inverse: #FFFFFF;

    --border-subtle: #E2E8F0;
    --border-active: #CBD5E1;
    --border-accent: #0D9488;

    --accent-primary: #0D9488;
    --accent-hover: #0F766E;
    --accent-soft: #E6FFFA;
    --accent-glow: rgba(13, 148, 136, 0.2);

    --status-danger: #DC2626;
    --status-danger-bg: #FEF2F2;
    --status-warning: #D97706;
    --status-warning-bg: #FFFBEB;
    --status-success: #16A34A;
    --status-success-bg: #F0FDF4;

    --shadow-surface: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
    --shadow-elevated: 0 10px 30px -4px rgba(15, 23, 42, 0.08);

    --blur-surface: none;
    --motion-duration-fast: 120ms;
    --motion-duration-normal: 180ms;
    --motion-duration-slow: 280ms;
    --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* ----------------------------------------------------
     Mode 2: Dark — Night Laboratory
     ---------------------------------------------------- */
  [data-theme="dark"] {
    --bg-app: #080D1A;
    --bg-surface: #0F172A;
    --bg-surface-elevated: #1E293B;
    --bg-surface-hover: #334155;
    --bg-overlay: rgba(3, 7, 18, 0.7);

    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-inverse: #0F172A;

    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-active: rgba(255, 255, 255, 0.2);
    --border-accent: #0EA5E9;

    --accent-primary: #0EA5E9;
    --accent-hover: #38BDF8;
    --accent-soft: rgba(14, 165, 233, 0.15);
    --accent-glow: rgba(14, 165, 233, 0.3);

    --status-danger: #EF4444;
    --status-danger-bg: rgba(239, 68, 68, 0.15);
    --status-warning: #F59E0B;
    --status-warning-bg: rgba(245, 158, 11, 0.15);
    --status-success: #10B981;
    --status-success-bg: rgba(16, 185, 129, 0.15);

    --shadow-surface: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 12px 40px -4px rgba(0, 0, 0, 0.6);

    --blur-surface: none;
    --motion-duration-fast: 150ms;
    --motion-duration-normal: 220ms;
    --motion-duration-slow: 350ms;
    --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* ----------------------------------------------------
     Mode 3: Heavy Glass — Liquid Intelligence
     ---------------------------------------------------- */
  [data-theme="glass"] {
    --bg-app: #030712;
    --bg-surface: rgba(15, 23, 42, 0.65);
    --bg-surface-elevated: rgba(30, 41, 59, 0.75);
    --bg-surface-hover: rgba(51, 65, 85, 0.85);
    --bg-overlay: rgba(3, 7, 18, 0.85);

    --text-primary: #FFFFFF;
    --text-secondary: #E2E8F0;
    --text-muted: #A0ABBA;
    --text-inverse: #030712;

    --border-subtle: rgba(255, 255, 255, 0.14);
    --border-active: rgba(56, 189, 248, 0.45);
    --border-accent: #2DD4BF;

    --accent-primary: #2DD4BF;
    --accent-hover: #38BDF8;
    --accent-soft: rgba(45, 212, 191, 0.18);
    --accent-glow: rgba(45, 212, 191, 0.45);

    --status-danger: #F87171;
    --status-danger-bg: rgba(248, 113, 113, 0.2);
    --status-warning: #FBBF24;
    --status-warning-bg: rgba(251, 191, 36, 0.2);
    --status-success: #34D399;
    --status-success-bg: rgba(52, 211, 153, 0.2);

    --shadow-surface: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --shadow-elevated: 0 20px 50px 0 rgba(0, 0, 0, 0.55);

    --blur-surface: blur(20px);
    --motion-duration-fast: 180ms;
    --motion-duration-normal: 280ms;
    --motion-duration-slow: 450ms;
    --motion-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* Ambient Background Orb Animations for Glass & Dark Modes */
@keyframes orb-float-1 {
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(40px, -60px) scale(1.15); }
}

@keyframes orb-float-2 {
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(-50px, 50px) scale(1.1); }
}

@keyframes beam-pulse {
  0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 4px var(--accent-primary)); }
  50% { opacity: 1; filter: drop-shadow(0 0 12px var(--accent-primary)); }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-active);
}

/* Base resets */
body {
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  transition: background-color var(--motion-duration-normal) var(--motion-ease),
              color var(--motion-duration-normal) var(--motion-ease);
}

/* Glass-specific surface reflection utilities */
[data-theme="glass"] .glass-panel {
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-surface), inset 0 1px 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="glass"] .glass-content-card {
  background: rgba(11, 18, 33, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

[data-theme="glass"] .glass-beam-glow {
  box-shadow: 0 0 20px var(--accent-glow), inset 0 0 10px var(--accent-glow);
  border-color: var(--accent-primary);
}

/* High readability styling for medical documents */
.medical-document-body {
  font-size: 0.965rem;
  line-height: 1.65;
  color: var(--text-primary);
}
.medical-document-body h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.medical-document-body p {
  margin-bottom: 0.75rem;
}
.medical-document-body ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
}
.medical-document-body li {
  margin-bottom: 0.25rem;
}

/* Accessible focus ring */
*:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}