/**
 * OHIF Viewer Custom Theming - v3.9+ Semantic Color System
 *
 * OHIF v3.9+ uses a semantic color system with CSS variables in HSL format.
 * These variables are used throughout the application via Tailwind classes like:
 * - text-primary, bg-primary
 * - text-secondary, bg-secondary
 * - text-muted-foreground
 * - etc.
 *
 * Brand Colors (HSL format):
 * - Primary: 200 85% 13% (#042843 - Deep blue)
 * - Secondary: 213 100% 59% (#2b8cff - Bright blue)
 * - Accent: 189 72% 63% (#5acce6 - Light cyan)
 * - Background: 40 50% 98% (#fefcf8 - Warm white)
 *
 * NOTE: Colors MUST be in HSL format (H S% L%) for Tailwind compatibility.
 * OHIF wraps these with hsl() automatically.
 */

/* Import Hanken Grotesk font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ========================================
   * FONT FAMILY
   * ======================================== */
  --font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* ========================================
   * SEMANTIC COLOR SYSTEM (OHIF v3.9+)
   *
   * IMPORTANT: OHIF requires HSL format for Tailwind compatibility
   * Format: H S% L% (space-separated, NO hsl() wrapper, NO commas)
   * Example: 200 85% 13% (not #042843 or hsl(200, 85%, 13%))
   * Tailwind wraps these with hsl() automatically
   * ======================================== */

  /* Primary brand color - Deep blue #042843 */
  --primary: 200 85% 13%;
  --primary-foreground: 0 0% 100%;

  /* Secondary brand color - Bright blue #2b8cff */
  --secondary: 213 100% 59%;
  --secondary-foreground: 0 0% 100%;

  /* Muted/subtle elements - Improved contrast */
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 50%;  /* Lightened from #666666 for better contrast */

  /* Accent color - Light cyan #5acce6 */
  --accent: 189 72% 63%;
  --accent-foreground: 200 85% 13%;  /* Deep blue text on light cyan */

  /* Background and foreground - Warm white #fefcf8 */
  --background: 40 50% 98%;
  --foreground: 0 0% 20%;  /* Dark gray #333333 */

  /* Card/panel backgrounds */
  --card: 0 0% 100%;
  --card-foreground: 0 0% 20%;

  /* Popover backgrounds */
  --popover: 200 85% 13%;
  --popover-foreground: 0 0% 20%;

  /* Borders and inputs */
  --border: 0 0% 87%;  /* #dddddd */
  --input: 0 0% 87%;

  /* Focus ring - Bright blue */
  --ring: 213 100% 59%;

  /* Highlight color - Active/selected states */
  --highlight: 213 100% 59%;

  /* Destructive/Error states - Red for delete buttons */
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  /* Neutral colors - For neutral UI elements */
  --neutral: 220 13% 91%;
  --neutral-light: 220 13% 95%;
  --neutral-dark: 220 13% 9%;

  /* ========================================
   * COLOR VARIANTS (light/main/dark shades)
   * For components that reference these explicitly
   * ======================================== */
  --primary-main: 205 88% 13%;
  --primary-light: 205 88% 33%;
  --primary-dark: 205 88% 5%;

  --secondary-main: 212 100% 58%;
  --secondary-light: 212 100% 78%;
  --secondary-dark: 212 100% 45%;

  --accent-main: 191 73% 62%;
  --accent-light: 191 73% 82%;
  --accent-dark: 191 73% 50%;

  /* ========================================
   * STATUS COLORS (HSL format)
   * ======================================== */
  --success: 134 61% 41%;  /* Green #28a745 */
  --success-foreground: 0 0% 100%;

  --warning: 45 100% 51%;  /* Yellow #ffc107 */
  --warning-foreground: 0 0% 20%;

  --error: 354 70% 54%;  /* Red #dc3545 */
  --error-foreground: 0 0% 100%;

  --info: 188 78% 41%;  /* Teal #17a2b8 */
  --info-foreground: 0 0% 100%;

  /* ========================================
   * ADDITIONAL BRAND COLORS (HSL format)
   * For backwards compatibility and custom components
   * ======================================== */
  --brand-primary: 200 85% 13%;    /* #042843 */
  --brand-secondary: 213 100% 59%; /* #2b8cff */
  --brand-accent: 189 72% 63%;     /* #5acce6 */
  --brand-dark: 200 85% 8%;        /* Darker variant of primary */

  /* ========================================
   * SPACING AND EFFECTS
   * ======================================== */
  --radius: 0.375rem; /* 6px - Tailwind's default rounded-md */

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

/* ========================================
 * TAILWIND CLASS OVERRIDES
 * Override OHIF's hardcoded Tailwind colors with brand colors
 * !important required to override compiled CSS
 * ======================================== */

/* Background color overrides */
.bg-primary-light { background-color: hsl(205, 88%, 33%) !important; }
.bg-primary-main { background-color: hsl(205, 88%, 13%) !important; }
.bg-primary-dark { background-color: hsl(205, 88%, 5%) !important; }

.bg-secondary-light { background-color: hsl(212, 100%, 78%) !important; }
.bg-secondary-main { background-color: hsl(212, 100%, 58%) !important; }
.bg-secondary-dark { background-color: hsl(212, 100%, 45%) !important; } /* ⚠️ HEADER FIX */

.bg-accent-light { background-color: hsl(191, 73%, 82%) !important; }
.bg-accent-main { background-color: hsl(191, 73%, 62%) !important; }
.bg-accent-dark { background-color: hsl(191, 73%, 50%) !important; }

/* Text color overrides */
.text-primary-light { color: hsl(205, 88%, 33%) !important; }
.text-primary-dark { color: hsl(205, 88%, 5%) !important; }
.text-secondary-light { color: hsl(212, 100%, 78%) !important; }
.text-secondary-dark { color: hsl(212, 100%, 45%) !important; }
.text-accent-light { color: hsl(191, 73%, 82%) !important; }
.text-accent-dark { color: hsl(191, 73%, 50%) !important; }

/* Border color overrides */
.border-primary-light { border-color: hsl(205, 88%, 33%) !important; }
.border-primary-dark { border-color: hsl(205, 88%, 5%) !important; }
.border-secondary-light { border-color: hsl(212, 100%, 78%) !important; }
.border-secondary-dark { border-color: hsl(212, 100%, 45%) !important; }
.border-accent-light { border-color: hsl(191, 73%, 82%) !important; }
.border-accent-dark { border-color: hsl(191, 73%, 50%) !important; }

/* ========================================
 * GLOBAL FONT APPLICATION
 * ======================================== */
body {
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply font to all text elements */
body, button, input, select, textarea {
  font-family: var(--font-family);
}

/* ========================================
 * SCROLLBAR STYLING
 * ======================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--muted);
}

::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--muted);
}

/* ========================================
 * FOCUS STYLES
 * ======================================== */
*:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

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

/* Brand gradient backgrounds */
.bg-brand-gradient {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
}

/* Brand text colors */
.text-brand-primary {
  color: var(--brand-primary);
}

.text-brand-secondary {
  color: var(--brand-secondary);
}

.text-brand-accent {
  color: var(--brand-accent);
}

/* Enhanced shadows */
.shadow-brand {
  box-shadow: 0 4px 14px 0 rgba(4, 40, 67, 0.15);
}

/* ========================================
 * OHIF-SPECIFIC ENHANCEMENTS
 * ======================================== */

/* Enhance viewport overlay text readability */
.viewport-element {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Improve measurement tool contrast */
[data-tool-active="true"] {
  color: var(--brand-accent) !important;
}

/* Study list hover effects */
[role="row"]:hover {
  background-color: rgba(43, 140, 255, 0.05);
  border-left: 3px solid var(--brand-secondary);
}

/* Active thumbnail border */
.thumbnail-active {
  border-color: var(--brand-secondary) !important;
  box-shadow: 0 0 0 2px var(--brand-secondary);
}

/* ========================================
 * RESPONSIVE FONT SCALING
 * ======================================== */
@media (max-width: 768px) {
  :root {
    font-size: 14px;
  }
}

@media (min-width: 1920px) {
  :root {
    font-size: 16px;
  }
}

/* ========================================
 * PRINT STYLES
 * ======================================== */
@media print {
  body {
    background: white;
    color: black;
  }

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