/**
 * Engineering Health Metrics - Design System
 * Entri Brand Guidelines
 *
 * This file contains all design tokens and utilities
 * that support the Tailwind CSS framework.
 */

:root {
  /* ===== ENTRI BRAND COLORS ===== */

  /* Primary Colors */
  --blue-500: #0089ff;   /* Main brand, CTAs, links */
  --blue-700: #0061b5;   /* Hover states, darker blue */
  --green-400: #33997d;  /* Success, positive actions */
  --purple-400: #9965ad; /* Premium, highlights */

  /* Neutrals */
  --white: #ffffff;      /* Light backgrounds */
  --grey-10: #fafafa;    /* Subtle backgrounds */
  --grey-30: #e0e0e0;    /* Borders, dividers */
  --grey-50: #a0a0a0;    /* Disabled text */
  --grey-70: #808080;    /* Secondary text */
  --grey-1000: #212121;  /* Primary text */
  --grey-1400: #121212;  /* Dark backgrounds */
  --black: #000000;      /* Pure black */

  /* Additional Colors */
  --orange-400: #ffb333; /* Alerts, warnings */
  --red-400: #f87b7c;    /* Errors, critical */
  --yellow-400: #ffdd53; /* Highlights, attention */

  /* ===== SEMANTIC COLOR MAPPINGS ===== */
  --primary: var(--blue-500);
  --primary-dark: var(--blue-700);
  --secondary: var(--purple-400);
  --tertiary: var(--green-400);
  --success: var(--green-400);
  --error: var(--red-400);
  --warning: var(--orange-400);
  --info: var(--purple-400);

  /* Text Colors (semantic aliases) */
  --color-on-surface: var(--grey-1000);      /* Primary text on white background */
  --color-text-secondary: var(--grey-70);    /* Secondary/muted text */

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

  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-secondary: 'Noto Serif', Georgia, serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs: 10px;    /* Caption, labels */
  --text-sm: 12px;    /* Small text */
  --text-base: 14px;  /* Body text */
  --text-lg: 16px;    /* Large body text */
  --text-xl: 18px;    /* Small headings */
  --text-2xl: 20px;   /* Subheadings */
  --text-3xl: 24px;   /* Headings */
  --text-4xl: 32px;   /* Large headings */
  --text-5xl: 40px;   /* Display */
  --text-6xl: 48px;   /* Hero */

  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-tight: 120%;   /* Headings, labels */
  --leading-normal: 150%;  /* Body text */
  --leading-relaxed: 165%; /* Long-form content */

  /* ===== SPACING SCALE (4px base) ===== */
  --spacing-0: 0;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-30: 120px;

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 8px;     /* Small elements */
  --radius-md: 16px;    /* Cards */
  --radius-lg: 24px;    /* Large cards */
  --radius-xl: 32px;    /* Hero sections */
  --radius-full: 9999px; /* Pills, badges */

  /* ===== 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);
  --shadow-blue-sm: 0 2px 8px rgba(0, 137, 255, 0.25);
  --shadow-blue-md: 0 4px 12px rgba(0, 137, 255, 0.35);

  /* ===== Z-INDEX SCALE ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease-out;
  --transition-base: 300ms ease-out;
  --transition-slow: 500ms ease-out;
}

/* ===== ACCESSIBILITY ===== */

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

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

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

/* Typography Utilities */
.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }
.font-mono { font-family: var(--font-mono); }

/* Text Size Utilities */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }

/* Color Utilities */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-warning { color: var(--warning); }

.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-success { background-color: var(--success); }
.bg-error { background-color: var(--error); }
.bg-warning { background-color: var(--warning); }

/* Border Utilities */
.border-primary { border-color: var(--primary); }
.border-secondary { border-color: var(--secondary); }
.border-success { border-color: var(--success); }
.border-error { border-color: var(--error); }
.border-warning { border-color: var(--warning); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-blue-sm { box-shadow: var(--shadow-blue-sm); }
.shadow-blue-md { box-shadow: var(--shadow-blue-md); }

/* Gradient Backgrounds */
.gradient-blue {
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
}

.gradient-purple-yellow {
  background: linear-gradient(135deg, var(--purple-400) 0%, var(--yellow-400) 100%);
}

.gradient-blue-light {
  background: linear-gradient(135deg, rgba(0, 137, 255, 0.1) 0%, rgba(0, 137, 255, 0.05) 100%);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
/* Use with media queries:
 * Mobile: default (< 640px)
 * Tablet: @media (min-width: 768px)
 * Desktop: @media (min-width: 1024px)
 * Large Desktop: @media (min-width: 1280px)
 */