/**
 * MTMP 360 Projects - Design Tokens
 * Generated from: docs/design/ui-design-system-spec.md
 * DO NOT modify colors directly in components - use these variables
 *
 * Last Updated: 2025-11-10
 * Version: 1.0.0
 */

:root {
  /* ========== COLORS ========== */

  /* Medtronic Brand Colors */
  --medtronic-blue-primary: #001E46;        /* Primary brand, headers */
  --medtronic-blue-darker: #140F4B;         /* Dark accent */
  --medtronic-blue-interactive: #1010EB;    /* Interactive elements */
  --medtronic-yellow: #FFCE00;              /* Visual hierarchy, warnings */
  --medtronic-white: #FFFFFF;               /* Backgrounds */

  /* Grayscale */
  --medtronic-gray-dark: #333333;           /* Primary text */
  --medtronic-gray-medium: #666666;         /* Secondary text */
  --medtronic-gray-light: #999999;          /* Tertiary text, disabled */
  --medtronic-gray-lightest: #F5F5F5;       /* Backgrounds, borders */

  /* Semantic Colors (Status Indicators) */
  --color-success: #28a745;                 /* Completed, On Track 🟢 */
  --color-warning: #ffc107;                 /* At Risk 🟡 */
  --color-danger: #dc3545;                  /* Delayed, Critical 🔴 */
  --color-info: #0dcaf0;                    /* Informational */

  /* Text Colors */
  --text-primary: var(--medtronic-gray-dark);
  --text-secondary: var(--medtronic-gray-medium);
  --text-tertiary: var(--medtronic-gray-light);
  --text-inverse: var(--medtronic-white);

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

  /* Font Families */
  --font-primary: "Avenir Next World", "Avenir Next", "Montserrat", "Inter",
                  "Helvetica Neue", "Helvetica", Arial, sans-serif;
  --font-monospace: "Consolas", "Monaco", "Courier New", monospace;

  /* Font Sizes */
  --font-size-xs: 12px;      /* Small labels, captions */
  --font-size-sm: 14px;      /* Body text, forms */
  --font-size-md: 16px;      /* Default body */
  --font-size-lg: 18px;      /* Subheadings */
  --font-size-xl: 20px;      /* H3 */
  --font-size-2xl: 24px;     /* H2 */
  --font-size-3xl: 32px;     /* H1 */

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

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========== SPACING ========== */
  /* 8px Grid System */

  --spacing-xs: 4px;         /* 0.5 units */
  --spacing-sm: 8px;         /* 1 unit */
  --spacing-md: 16px;        /* 2 units */
  --spacing-lg: 24px;        /* 3 units */
  --spacing-xl: 32px;        /* 4 units */
  --spacing-2xl: 48px;       /* 6 units */
  --spacing-3xl: 64px;       /* 8 units */

  /* ========== SHADOWS ========== */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);       /* Cards */
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);       /* Dropdowns */
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);     /* Modals */
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);      /* Overlays */

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

  --radius-sm: 4px;          /* Inputs, badges */
  --radius-md: 8px;          /* Cards, containers */
  --radius-lg: 24px;         /* Buttons (pill shape) */
  --radius-round: 50%;       /* Avatars, circular */

  /* ========== TRANSITIONS ========== */

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

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

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-tooltip: 1070;

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

  --container-max-width: 1400px;
  --header-height: 64px;
  --sidebar-width: 280px;
}

/* ========== SEMANTIC TOKENS ========== */
/* Derived from base tokens for specific use cases */

:root {
  /* Buttons */
  --btn-primary-bg: linear-gradient(135deg, var(--medtronic-blue-interactive) 0%, var(--medtronic-blue-primary) 100%);
  --btn-primary-text: var(--text-inverse);
  --btn-primary-hover-shadow: 0 5px 15px rgba(16, 16, 235, 0.4);

  --btn-secondary-bg: var(--medtronic-white);
  --btn-secondary-border: 1px solid var(--medtronic-blue-interactive);
  --btn-secondary-text: var(--medtronic-blue-interactive);

  /* Tables */
  --table-header-bg: var(--medtronic-blue-primary);
  --table-header-text: var(--text-inverse);
  --table-row-hover-bg: #f8f9fa;
  --table-border: 1px solid #dee2e6;

  /* Badges */
  --badge-draft-bg: #6c757d;         /* Gray */
  --badge-active-bg: var(--medtronic-blue-interactive);
  --badge-completed-bg: var(--color-success);
  --badge-onhold-bg: var(--color-warning);
  --badge-delayed-bg: var(--color-danger);
  --badge-atrisk-bg: var(--color-warning);
  --badge-ontrack-bg: var(--color-success);

  /* Forms */
  --input-border: 1px solid #ddd;
  --input-border-focus: var(--medtronic-blue-interactive);
  --input-focus-shadow: 0 0 0 3px rgba(16, 16, 235, 0.1);

  /* Navigation */
  --nav-bg: var(--medtronic-blue-primary);
  --nav-text: var(--text-inverse);
  --nav-hover-bg: rgba(255, 255, 255, 0.1);
}