/**
 * Design System - LogisticsMonitor
 * Modern, professional design tokens and variables
 */

:root {
  /* ===== Colors ===== */

  /* Background Colors */
  --color-bg-primary: #FAFBFC;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FFFFFF;

  /* Border Colors */
  --color-border: #E1E4E8;
  --color-border-hover: #C9CFD6;

  /* Text Colors */
  --color-text-primary: #24292E;
  --color-text-secondary: #586069;
  --color-text-tertiary: #6A737D;
  --color-text-disabled: #959DA5;

  /* Accent Colors */
  --color-accent-primary: #0969DA;
  --color-accent-primary-hover: #0860CA;
  --color-accent-success: #1A7F37;
  --color-accent-success-hover: #16692F;
  --color-accent-warning: #BF8700;
  --color-accent-warning-hover: #A67500;
  --color-accent-danger: #CF222E;
  --color-accent-danger-hover: #B81D28;
  --color-accent-info: #0969DA;

  /* Status Colors */
  --color-status-operational: #1A7F37;
  --color-status-degraded: #BF8700;
  --color-status-down: #CF222E;
  --color-status-maintenance: #0969DA;
  --color-status-unknown: #6A737D;

  /* Link Colors */
  --color-link: #0969DA;
  --color-link-hover: #0550AE;
  --color-link-visited: #6639BA;

  /* Overlay Colors */
  --color-overlay-bg: rgba(0, 0, 0, 0.4);
  --color-overlay-light: rgba(250, 251, 252, 0.95);

  /* ===== Spacing ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

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

  /* ===== Shadows ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.16);

  /* ===== Typography ===== */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 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.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ===== Animation Timing ===== */
  --timing-instant: 100ms;
  --timing-fast: 150ms;
  --timing-normal: 200ms;
  --timing-slow: 300ms;
  --timing-loading: 600ms;

  /* Easing Functions */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* ===== Z-Index Layers ===== */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 10000;
}

/* ===== Dark Mode Support ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #0D1117;
    --color-bg-surface: #161B22;
    --color-bg-elevated: #21262D;

    --color-border: #30363D;
    --color-border-hover: #484F58;

    --color-text-primary: #C9D1D9;
    --color-text-secondary: #8B949E;
    --color-text-tertiary: #6E7681;
    --color-text-disabled: #484F58;

    --color-overlay-bg: rgba(0, 0, 0, 0.6);
    --color-overlay-light: rgba(13, 17, 23, 0.95);

    --color-link: #58A6FF;
    --color-link-hover: #79C0FF;
    --color-link-visited: #BC8CFF;
  }
}

/* ===== Utility Classes ===== */

/* Screen Reader Only */
.sr-only {
  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 */
*:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.2);
}

/* Smooth Transitions */
* {
  transition-timing-function: var(--ease-standard);
}

/* ===== Icon Styles ===== */

/* Icon sizing classes */
.icon-xs {
  width: 14px;
  height: 14px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 20px;
  height: 20px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

.icon-xl {
  width: 32px;
  height: 32px;
}

/* Contextual icon styles */
.page-icon {
  width: 32px;
  height: 32px;
  color: var(--color-accent-primary);
}

.section-icon {
  width: 24px;
  height: 24px;
  margin-right: var(--space-sm);
}

.btn-icon {
  width: 18px;
  height: 18px;
}

.nav-icon {
  width: 20px;
  height: 20px;
}

.card-icon {
  width: 20px;
  height: 20px;
  margin-right: var(--space-xs);
}

.footer-icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: middle;
}

.link-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
}