/* ============================================================================
   MEDTRONIC DESIGN SYSTEM - DESIGN TOKENS
   ============================================================================

   This file contains the core design tokens (CSS Custom Properties) for the
   MTMP 360 Projects Module, ensuring consistency with Medtronic's corporate
   identity across all UI components.

   Version: 1.0
   Reference: /docs/design/ui-design-system-spec.md
   ============================================================================ */

:root {
  /* ==========================================================================
     COLOR PALETTE - MEDTRONIC BRAND COLORS
     ========================================================================== */

  /* Primary Blues - Brand Identity */
  --medtronic-blue-primary: #001E46;      /* Azul Medtronic principal */
  --medtronic-blue-dark: #140F4B;         /* Azul oscuro */
  --medtronic-blue-darker: #170F5F;       /* Azul más oscuro */
  --medtronic-blue-medium: #004B87;       /* Azul medio */
  --medtronic-blue-interactive: #1010EB;  /* Azul interactivo (links, buttons) */

  /* Accent Color */
  --medtronic-yellow: #FFCE00;            /* Amarillo Medtronic (highlights, badges) */

  /* Neutral Grays */
  --medtronic-gray-dark: #3C3C3C;         /* Texto principal */
  --medtronic-gray-medium: #53565A;       /* Texto secundario */
  --medtronic-gray-light: #979797;        /* Bordes, iconos inactivos */
  --medtronic-gray-lighter: #BDBDBD;      /* Bordes suaves */
  --medtronic-gray-lightest: #F5F5F5;     /* Fondos, separadores */

  /* Text Colors */
  --text-primary: #3C3C3C;                /* Cuerpo de texto */
  --text-secondary: #555555;              /* Texto secundario */
  --text-light: #FFFFFF;                  /* Texto sobre fondos oscuros */
  --text-muted: #6C757D;                  /* Texto de ayuda, captions */

  /* Semantic Colors (Status Indicators) */
  --status-success: #28A745;              /* Verde - Completado, On Track */
  --status-warning: #FFC107;              /* Amarillo - At Risk */
  --status-error: #DC3545;                /* Rojo - Delayed, Error */
  --status-info: #17A2B8;                 /* Azul claro - Informativo */
  --status-neutral: #6C757D;              /* Gris - On Hold, Neutral */

  /* Background Colors */
  --bg-white: #FFFFFF;
  --bg-light: #F8F9FA;
  --bg-lighter: #FAFAFA;
  --bg-dark: #212529;

  /* Border Colors */
  --border-color: #E0E0E0;
  --border-color-light: #EEEEEE;
  --border-color-dark: #CED4DA;

  /* ==========================================================================
     TYPOGRAPHY - FONT FAMILIES
     ========================================================================== */

  /* Primary Font Stack (Avenir Next World + Fallbacks) */
  --font-family-primary: "Avenir Next World", "Avenir Next", "Montserrat", "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-family-mono: "Consolas", "Monaco", "Courier New", monospace;

  /* Font Variants for Avenir Next World */
  --font-regular: "Avenir Next World Regular", "Avenir Next", "Montserrat", "Inter", sans-serif;
  --font-regular-italic: "Avenir Next World Regular Italic", "Avenir Next Italic", "Montserrat Italic", "Inter Italic", sans-serif;
  --font-bold: "Avenir Next World Bold", "Avenir Next Bold", "Montserrat Bold", "Inter Bold", sans-serif;
  --font-demi: "Avenir Next World Demi Bold", "Avenir Next Demi Bold", "Montserrat SemiBold", "Inter SemiBold", sans-serif;
  --font-medium: "Avenir Next World Medium", "Avenir Next Medium", "Montserrat Medium", "Inter Medium", sans-serif;
  --font-thin: "Avenir Next World Thin", "Avenir Next Thin", "Montserrat Thin", "Inter Thin", sans-serif;

  /* ==========================================================================
     SPACING - 8PX GRID SYSTEM
     ========================================================================== */

  --spacing-xs: 4px;     /* 0.5 units - Tight spacing (icon padding) */
  --spacing-sm: 8px;     /* 1 unit - Compact (form field padding) */
  --spacing-md: 16px;    /* 2 units - Default (card padding, margins) */
  --spacing-lg: 24px;    /* 3 units - Comfortable (section spacing) */
  --spacing-xl: 32px;    /* 4 units - Spacious (page margins) */
  --spacing-xxl: 48px;   /* 6 units - Large gaps (hero sections) */
  --spacing-xxxl: 64px;  /* 8 units - Extra large (page sections) */

  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */

  --radius-sm: 4px;      /* Form fields, inputs, badges */
  --radius-md: 8px;      /* Cards, containers */
  --radius-lg: 24px;     /* Buttons (pill shape) */
  --radius-round: 50%;   /* Circular buttons, avatars */

  /* ==========================================================================
     SHADOWS - ELEVATION
     ========================================================================== */

  /* Card elevation */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Dropdown, popover elevation */
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* Modal, dialog elevation */
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);

  /* Full-screen overlay */
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);

  /* ==========================================================================
     TRANSITIONS - ANIMATION TIMING
     ========================================================================== */

  /* Timing */
  --transition-fast: 150ms ease;    /* Hover, focus states */
  --transition-base: 200ms ease;    /* Default interactions */
  --transition-slow: 300ms ease;    /* Complex animations, modals */

  /* Easing functions */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ==========================================================================
     BREAKPOINTS - RESPONSIVE DESIGN
     ========================================================================== */

  --breakpoint-sm: 576px;   /* Small devices (landscape phones) */
  --breakpoint-md: 768px;   /* Medium devices (tablets) */
  --breakpoint-lg: 992px;   /* Large devices (desktops) */
  --breakpoint-xl: 1200px;  /* Extra large devices */
  --breakpoint-xxl: 1400px; /* Extra extra large devices */

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

  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

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

/* Apply font family globally */
body {
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-white);
}

/* Headings */
h1, .h1 {
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: var(--medtronic-gray-dark);
  margin-bottom: var(--spacing-md);
}

h2, .h2 {
  font-size: 28px;
  font-weight: 400;
  line-height: 30px;
  color: var(--medtronic-blue-darker);
  margin-bottom: var(--spacing-md);
}

h3, .h3 {
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
  color: var(--medtronic-gray-dark);
  margin-bottom: 12px;
}

h4, .h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--medtronic-gray-dark);
  margin-bottom: 12px;
}

/* Body text utilities */
.text-small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.text-tiny {
  font-size: 12px;
  line-height: 1.5;
  color: var(--medtronic-gray-light);
}

.text-bold {
  font-weight: 600;
}

.text-muted {
  color: var(--text-muted);
}

/* Links */
a {
  color: var(--medtronic-blue-interactive);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--medtronic-blue-medium);
  text-decoration: underline;
}

/* ============================================================================
   ACCESSIBILITY - FOCUS STATES
   ============================================================================ */

/* Global focus style for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--medtronic-blue-interactive);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove focus for mouse users (only show for keyboard) */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Dark background focus (use yellow for contrast) */
.dark-bg *:focus-visible {
  outline-color: var(--medtronic-yellow);
}

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

/* Screen reader only (accessible but visually hidden) */
.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;
}

/* Spacing utilities */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Gap utilities for flexbox/grid */
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================ */

/* Respect user motion preferences (accessibility) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a, a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }
}