/**
 * Certis BioLabs Brand Theme
 *
 * Professional, accessible UI theme for Certis BioLabs laboratory information management.
 * Based on official brand guidelines with gradient design system.
 *
 * Brand Colors:
 * - Primary: Deep Pink (#904369) - Main brand color
 * - Secondary: Dark Blue (#00548e) - Professional contrast
 * - Accent: Sky Blue (#3eb0e3) - Bright highlights
 * - Light Blue (#737fc7) - Soft complementary
 * - Black shadow - Depth and dimension
 *
 * Typography:
 * - Montserrat Alternates (headings, display)
 * - Montserrat (body, UI)
 *
 * Design Principles:
 * - Professional laboratory aesthetic
 * - Gradient-based visual hierarchy
 * - Clean, modern components
 * - WCAG 2.1 AA accessible
 * - Mobile-first responsive
 */

/* ============================================
   DESIGN TOKENS (CSS Custom Properties)
   ============================================ */

:root {
  /* Brand Colors - Primary Palette (from official guidelines) */
  --brand-primary: #904369;           /* Deep Pink - Primary brand color */
  --brand-primary-hover: #7a3757;     /* Darker for hover states */
  --brand-primary-active: #632c46;    /* Even darker for active states */
  --brand-primary-light: #a55580;     /* Lighter variant */
  --brand-primary-lighter: #d19bb7;   /* Very light for backgrounds */

  --brand-secondary: #00548e;         /* Dark Blue - Secondary brand color */
  --brand-secondary-hover: #003d6b;   /* Darker for hover */
  --brand-secondary-active: #002d4f;  /* Darker for active */
  --brand-secondary-light: #0066ab;   /* Lighter variant */
  --brand-secondary-lighter: #4d92c9; /* Very light for backgrounds */

  --brand-accent-sky: #3eb0e3;        /* Sky Blue - Bright accent */
  --brand-accent-sky-hover: #2994c4;  /* Darker for hover */
  --brand-accent-sky-light: #6ec4ed;  /* Lighter variant */

  --brand-accent-light: #737fc7;      /* Light Blue 06 - Soft complement */
  --brand-accent-light-hover: #5865b8; /* Darker for hover */
  --brand-accent-light-lighter: #a5aed9; /* Very light for backgrounds */

  /* Gradient Combinations (inspired by logo) */
  --gradient-primary: linear-gradient(135deg, #904369 0%, #737fc7 100%);
  --gradient-secondary: linear-gradient(135deg, #00548e 0%, #3eb0e3 100%);
  --gradient-hero: linear-gradient(135deg, #904369 0%, #737fc7 50%, #3eb0e3 100%);
  --gradient-subtle: linear-gradient(to right, rgba(144, 67, 105, 0.1), rgba(115, 127, 199, 0.1));

  /* Semantic Colors (mapped from brand palette) */
  --brand-success: #22C55E;           /* Green for success states */
  --brand-success-light: #86EFAC;
  --brand-success-dark: #16A34A;

  --brand-info: #3eb0e3;              /* Sky Blue for info (brand color) */
  --brand-info-light: #6ec4ed;
  --brand-info-dark: #2994c4;

  --brand-warning: #F59E0B;           /* Amber for warnings */
  --brand-warning-light: #FCD34D;
  --brand-warning-dark: #D97706;

  --brand-danger: #DC2626;            /* Red for errors/danger */
  --brand-danger-light: #FCA5A5;
  --brand-danger-dark: #B91C1C;

  /* Neutral Colors (grayscale with cool undertone) */
  --ink-900: #0F172A;                 /* Darkest - Headings */
  --ink-800: #1E293B;                 /* Very dark */
  --ink-700: #334155;                 /* Dark - Body text */
  --ink-600: #475569;                 /* Medium dark */
  --ink-500: #64748B;                 /* Medium - Muted text */
  --ink-400: #94A3B8;                 /* Light - Disabled */
  --ink-300: #CBD5E1;                 /* Very light */
  --ink-200: #E2E8F0;                 /* Border */
  --ink-100: #F1F5F9;                 /* Background tint */
  --ink-50: #F8FAFC;                  /* Lightest background */

  /* Surfaces (backgrounds) */
  --surface-0: #FFFFFF;               /* Pure white - Cards, panels */
  --surface-50: #F8FAFC;              /* Subtle tint - Page background */
  --surface-100: #F1F5F9;             /* Light tint - Card headers */
  --surface-200: #E2E8F0;             /* Hover states */
  --surface-gradient: linear-gradient(to bottom, #FFFFFF, #F8FAFC);

  /* Borders */
  --border-100: #F1F5F9;              /* Very subtle borders */
  --border-200: #E2E8F0;              /* Default borders */
  --border-300: #CBD5E1;              /* Emphasized borders */
  --border-400: #94A3B8;              /* Strong borders */

  /* Shadows (with cool undertone) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  --shadow-brand: 0 10px 25px rgba(144, 67, 105, 0.15);
  --shadow-brand-hover: 0 15px 35px rgba(144, 67, 105, 0.25);

  /* Focus Ring (brand primary with alpha) */
  --focus-ring: #904369;
  --focus-ring-alpha: rgba(144, 67, 105, 0.35);
  --focus-ring-offset: 2px;

  /* Typography */
  --font-display: 'Montserrat Alternates', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', Consolas, monospace;

  /* Font Sizes (modular scale based on 16px) */
  --text-xs: 0.75rem;      /* 12px - Tiny labels, captions */
  --text-sm: 0.875rem;     /* 14px - Small body, helper text */
  --text-base: 1rem;       /* 16px - Default body */
  --text-lg: 1.125rem;     /* 18px - Large body */
  --text-xl: 1.25rem;      /* 20px - h4 */
  --text-2xl: 1.5rem;      /* 24px - h3 */
  --text-3xl: 1.875rem;    /* 30px - h2 */
  --text-4xl: 2.25rem;     /* 36px - h1 */
  --text-5xl: 3rem;        /* 48px - Display/hero */

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

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;   /* Headings */
  --leading-snug: 1.375;
  --leading-normal: 1.5;   /* Body text */
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Spacing (8pt grid system) */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;   /* 2px */
  --space-1: 0.25rem;      /* 4px */
  --space-1-5: 0.375rem;   /* 6px */
  --space-2: 0.5rem;       /* 8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3: 0.75rem;      /* 12px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-7: 1.75rem;      /* 28px */
  --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-none: 0;
  --radius-sm: 0.375rem;   /* 6px - Inputs, small elements */
  --radius-md: 0.5rem;     /* 8px - Buttons, badges */
  --radius-lg: 0.75rem;    /* 12px - Cards, modals */
  --radius-xl: 1rem;       /* 16px - Large cards */
  --radius-2xl: 1.5rem;    /* 24px - Hero sections */
  --radius-full: 9999px;   /* Circular */

  /* Transitions */
  --transition-fast: 100ms ease-in-out;
  --transition-base: 150ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  --transition-slower: 500ms ease-in-out;

  /* Z-index scale */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

/* ============================================
   DARK MODE THEME
   ============================================ */

[data-theme="dark"] {
  /* Inverted surfaces */
  --surface-0: #0F172A;
  --surface-50: #1E293B;
  --surface-100: #334155;
  --surface-200: #475569;
  --surface-gradient: linear-gradient(to bottom, #0F172A, #1E293B);

  /* Inverted text */
  --ink-900: #F8FAFC;
  --ink-800: #F1F5F9;
  --ink-700: #E2E8F0;
  --ink-600: #CBD5E1;
  --ink-500: #94A3B8;
  --ink-400: #64748B;
  --ink-300: #475569;
  --ink-200: #334155;
  --ink-100: #1E293B;
  --ink-50: #0F172A;

  /* Adjusted borders */
  --border-100: #1E293B;
  --border-200: #334155;
  --border-300: #475569;
  --border-400: #64748B;

  /* Darker shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  --shadow-brand: 0 10px 25px rgba(144, 67, 105, 0.3);
  --shadow-brand-hover: 0 15px 35px rgba(144, 67, 105, 0.45);

  /* Brand colors stay mostly the same, slightly adjusted for dark */
  --brand-primary-lighter: #b67797;
  --brand-secondary-lighter: #3382b8;
  --brand-accent-light-lighter: #8f99d1;
}

/* Automatic dark mode based on system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Apply dark mode variables */
    --surface-0: #0F172A;
    --surface-50: #1E293B;
    --surface-100: #334155;
    --surface-200: #475569;
    --surface-gradient: linear-gradient(to bottom, #0F172A, #1E293B);

    --ink-900: #F8FAFC;
    --ink-800: #F1F5F9;
    --ink-700: #E2E8F0;
    --ink-600: #CBD5E1;
    --ink-500: #94A3B8;
    --ink-400: #64748B;
    --ink-300: #475569;
    --ink-200: #334155;
    --ink-100: #1E293B;
    --ink-50: #0F172A;

    --border-100: #1E293B;
    --border-200: #334155;
    --border-300: #475569;
    --border-400: #64748B;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-brand: 0 10px 25px rgba(144, 67, 105, 0.3);
    --shadow-brand-hover: 0 15px 35px rgba(144, 67, 105, 0.45);
  }
}

/* ============================================
   GLOBAL RESETS & BASE STYLES
   ============================================ */

* {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: inherit;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--ink-700);
  background-color: var(--surface-50);
  margin: 0;
  padding: 0;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--ink-900);
  margin-top: 0;
  margin-bottom: var(--space-3);
}

h1 {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.lead {
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--ink-600);
}

.text-muted {
  color: var(--ink-500) !important;
}

.text-small {
  font-size: var(--text-sm);
}

.text-tiny {
  font-size: var(--text-xs);
}

strong, b {
  font-weight: var(--font-semibold);
}

em, i {
  font-style: italic;
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  padding: 0.125em 0.375em;
  background-color: var(--surface-100);
  border-radius: var(--radius-sm);
  color: var(--brand-primary);
  font-size: var(--text-sm);
}

pre {
  padding: var(--space-4);
  background-color: var(--surface-100);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-4) 0;
}

pre code {
  padding: 0;
  background-color: transparent;
  color: inherit;
}

/* ============================================
   LINKS
   ============================================ */

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--brand-primary-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* Flexbox utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }

/* Spacing utilities (margin, padding) */
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }

.p-0 { padding: 0 !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-6 { padding: var(--space-6) !important; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Font weights */
.font-normal { font-weight: var(--font-normal) !important; }
.font-medium { font-weight: var(--font-medium) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-bold { font-weight: var(--font-bold) !important; }

/* Shadows */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-brand { box-shadow: var(--shadow-brand) !important; }

/* Borders */
.border-0 { border: 0 !important; }
.border { border: 1px solid var(--border-200) !important; }
.border-t { border-top: 1px solid var(--border-200) !important; }
.border-b { border-bottom: 1px solid var(--border-200) !important; }
.border-l { border-left: 1px solid var(--border-200) !important; }
.border-r { border-right: 1px solid var(--border-200) !important; }

/* Border radius */
.rounded-none { border-radius: var(--radius-none) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded { border-radius: var(--radius-md) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Dividers */
.divider {
  height: 1px;
  background-color: var(--border-200);
  margin: var(--space-6) 0;
  border: none;
}

.divider-vertical {
  width: 1px;
  background-color: var(--border-200);
  margin: 0 var(--space-4);
  border: none;
  align-self: stretch;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -999px;
  left: 0;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  background: var(--gradient-primary);
  color: white;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: var(--font-medium);
  box-shadow: var(--shadow-xl);
  transition: top var(--transition-base);
}

.skip-to-content:focus {
  top: 0;
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Visually hidden but accessible */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Ensure disabled elements are visually distinct */
:disabled,
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 1200px) {
  :root {
    --text-4xl: 2rem;     /* 32px */
    --text-3xl: 1.75rem;  /* 28px */
  }
}

@media (max-width: 768px) {
  :root {
    --text-4xl: 1.75rem;  /* 28px */
    --text-3xl: 1.5rem;   /* 24px */
    --text-2xl: 1.25rem;  /* 20px */
  }

  body {
    font-size: var(--text-sm);
  }
}

@media (max-width: 576px) {
  :root {
    --text-4xl: 1.5rem;   /* 24px */
    --text-3xl: 1.25rem;  /* 20px */
    --text-2xl: 1.125rem; /* 18px */
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  body {
    background-color: white;
    color: black;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  .no-print {
    display: none !important;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

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

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
  :root {
    --border-200: currentColor;
    --border-300: currentColor;
  }

  button,
  input,
  select,
  textarea {
    border-width: 2px;
  }
}