/**
 * STEP 1 EXPLORERS - SHARED DESIGN TOKENS
 *
 * Unified design system for Conditions, Medications, and Bugs explorers.
 * This file contains all CSS variables (design tokens) used across platforms.
 *
 * Last Updated: October 20, 2025
 * Phase: 3 - Shared Design System
 */

:root {
    /* ========================================================================
       COLOR PALETTE
       ======================================================================== */

    /* Primary Colors */
    --color-primary: #3498db;
    --color-primary-dark: #2980b9;
    --color-primary-light: #5dade2;
    --color-primary-hover: #2980b9;

    /* Neutrals - Backgrounds */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f4f7f9;
    --color-bg-tertiary: #ecf0f1;
    --color-bg-quaternary: #f8f9fa;
    --color-bg-hover: #f5f5f5;

    /* Neutrals - Text */
    --color-text-primary: #2c3e50;
    --color-text-secondary: #34495e;
    --color-text-tertiary: #7f8c8d;
    --color-text-muted: #95a5a6;
    --color-text-inverse: #ffffff;

    /* Neutrals - Borders */
    --color-border-primary: #e0e0e0;
    --color-border-secondary: #d5dbdb;
    --color-border-tertiary: #bdc3c7;

    /* System Colors - Medical Systems */
    --system-cardiovascular: #e74c3c;
    --system-respiratory: #3498db;
    --system-gastrointestinal: #f39c12;
    --system-nervous: #9b59b6;
    --system-renal: #1abc9c;
    --system-endocrine: #e91e63;
    --system-psychiatry: #27ae60;
    --system-autonomic: #8e44ad;
    --system-antimicrobial: #16a085;
    --system-hematology: #c0392b;
    --system-immunology: #d35400;
    --system-musculoskeletal: #2c3e50;
    --system-dermatology: #f1c40f;
    --system-ophthalmology: #3498db;
    --system-reproductive: #e91e63;
    --system-pain: #e67e22;

    /* Severity Indicators */
    --severity-high: #e74c3c;
    --severity-high-bg: #fadbd8;
    --severity-high-text: #c0392b;
    --severity-medium: #f39c12;
    --severity-medium-bg: #fdebd0;
    --severity-medium-text: #d68910;
    --severity-low: #27ae60;
    --severity-low-bg: #d5f4e6;
    --severity-low-text: #196f3d;

    /* Acuity Indicators */
    --acuity-acute: #e74c3c;
    --acuity-acute-bg: #fdebd0;
    --acuity-acute-text: #d68910;
    --acuity-chronic: #9b59b6;
    --acuity-chronic-bg: #e8daef;
    --acuity-chronic-text: #7d3c98;

    /* Tag Colors - Medications */
    --tag-indication-bg: #fdf2e9;
    --tag-indication-text: #e67e22;
    --tag-contraindication-bg: #fff3cd;
    --tag-contraindication-text: #856404;
    --tag-side-effect-bg: #fdedec;
    --tag-side-effect-text: #e74c3c;
    --tag-mechanism-bg: #fef9e7;
    --tag-mechanism-text: #f39c12;
    --tag-interaction-bg: #e2e3e5;
    --tag-interaction-text: #495057;

    /* Tag Colors - Classes */
    --tag-class-bg: #f0f9e8;
    --tag-class-text: #27ae60;
    --tag-subclass-bg: #f3e5f5;
    --tag-subclass-text: #8e24aa;
    --tag-system-bg: #e8f4fd;
    --tag-system-text: #2980b9;

    /* Status Colors */
    --status-success: #27ae60;
    --status-success-bg: #d4edda;
    --status-success-text: #155724;
    --status-warning: #f39c12;
    --status-warning-bg: #fff3cd;
    --status-warning-text: #856404;
    --status-error: #e74c3c;
    --status-error-bg: #f8d7da;
    --status-error-text: #721c24;
    --status-info: #3498db;
    --status-info-bg: #d1ecf1;
    --status-info-text: #0c5460;

    /* Interactive States */
    --color-link: #3498db;
    --color-link-hover: #2980b9;
    --color-link-visited: #8e44ad;
    --color-focus-ring: rgba(52, 152, 219, 0.3);
    --color-selected: #3498db;
    --color-selected-bg: #e8f4fd;

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

    /* Font Families */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

    /* Font Sizes */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2rem;        /* 32px */

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

    /* Line Heights */
    --line-height-tight: 1.4;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.8;

    /* Letter Spacing */
    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.05em;

    /* ========================================================================
       SPACING
       ======================================================================== */

    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */

    /* ========================================================================
       LAYOUT
       ======================================================================== */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 12px 40px rgba(0, 0, 0, 0.2);

    /* Border Widths */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;

    /* ========================================================================
       ANIMATIONS & TRANSITIONS
       ======================================================================== */

    /* Durations */
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;

    /* Timing Functions */
    --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);

    /* Transitions */
    --transition-fast: var(--duration-fast) var(--ease-out);
    --transition-base: var(--duration-base) var(--ease-out);
    --transition-slow: var(--duration-slow) var(--ease-out);
    --transition-all: all var(--duration-base) var(--ease-out);

    /* ========================================================================
       Z-INDEX LAYERS
       ======================================================================== */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-tooltip: 2000;
    --z-notification: 3000;

    /* ========================================================================
       BREAKPOINTS (for reference in media queries)
       ======================================================================== */

    /* Note: CSS custom properties don't work in media queries,
       but we document them here for consistency */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /* ========================================================================
       COMPONENT-SPECIFIC TOKENS
       ======================================================================== */

    /* Headers */
    --header-height: 80px;
    --header-bg: var(--color-bg-primary);
    --header-border: var(--color-border-primary);

    /* Sidebar */
    --sidebar-width: 400px;
    --sidebar-bg: var(--color-bg-primary);
    --sidebar-border: var(--color-border-primary);

    /* Cards */
    --card-bg: var(--color-bg-primary);
    --card-border: var(--color-border-primary);
    --card-padding: var(--space-lg);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-lg);

    /* Buttons */
    --button-height: 36px;
    --button-padding-x: var(--space-md);
    --button-padding-y: var(--space-sm);
    --button-radius: var(--radius-md);
    --button-font-weight: var(--font-weight-semibold);

    /* Input Fields */
    --input-height: 40px;
    --input-padding-x: var(--space-md);
    --input-padding-y: var(--space-sm);
    --input-radius: var(--radius-md);
    --input-border: var(--color-border-primary);
    --input-border-focus: var(--color-primary);
    --input-bg: var(--color-bg-primary);

    /* Tags/Badges */
    --tag-padding-x: 10px;
    --tag-padding-y: 4px;
    --tag-radius: 15px;
    --tag-font-size: var(--font-size-sm);

    /* Modals */
    --modal-bg: var(--color-bg-primary);
    --modal-backdrop-bg: rgba(44, 62, 80, 0.55);
    --modal-max-width: 600px;
    --modal-radius: var(--radius-lg);
    --modal-shadow: var(--shadow-2xl);
}

/* ========================================================================
   GLOBAL STYLES
   ======================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

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

/* Selection styling */
::selection {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

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

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================================================
   SCROLLBAR STYLING (Webkit browsers)
   ======================================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-tertiary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-tertiary);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}