/* ============================================
   FIFTEEN54 DESIGN SYSTEM
   Shared styles for all Fifteen54 applications

   Usage:
   - Import this file in your app's CSS or HTML
   - Add theme class to body: "theme-dark" or "theme-light"
   - Use CSS variables throughout your styles
   ============================================ */

/* ----------------------------------------
   1. BRAND COLORS (Core identity)
   ---------------------------------------- */
:root {
  /* Primary brand palette */
  --brand-navy: #1a1a2e;
  --brand-navy-light: #16213e;
  --brand-navy-medium: #0f3460;
  --brand-navy-dark: #0f0f1a;
  --brand-coral: #e94560;
  --brand-coral-light: #ff6b6b;
  --brand-coral-dark: #c73e54;

  /* Light theme accent (supplier portal, public pages) */
  --brand-blue: #3f76ad;
  --brand-blue-light: #5a94c9;
  --brand-blue-dark: #2d5a8a;

  /* Material colors (steel/fabrication specific) */
  --bronze: #c27430;
  --bronze-dark: #a66228;

  /* Neutral grays */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
}

/* ----------------------------------------
   2. SEMANTIC COLORS (Status indicators)
   ---------------------------------------- */
:root {
  /* Success (green) */
  --success: #4ade80;
  --success-dark: #16a34a;
  --success-light: #86efac;
  --success-rgb: 74, 222, 128;
  --success-bg: #f0fdf4;
  --success-bg-dark: #dcfce7;

  /* Warning (amber) */
  --warning: #fbbf24;
  --warning-dark: #d97706;
  --warning-light: #fcd34d;
  --warning-rgb: 251, 191, 36;
  --warning-bg: #fefce8;
  --warning-bg-dark: #fef3c7;

  /* Error (red) */
  --error: #f87171;
  --error-dark: #dc2626;
  --error-light: #fca5a5;
  --error-rgb: 248, 113, 113;
  --error-bg: #fef2f2;
  --error-bg-dark: #fecaca;

  /* Info (blue) */
  --info: #60a5fa;
  --info-dark: #2563eb;
  --info-light: #93c5fd;
  --info-rgb: 96, 165, 250;
  --info-bg: #eff6ff;
  --info-bg-dark: #dbeafe;

  /* Purple (for special states) */
  --purple: #a78bfa;
  --purple-dark: #7c3aed;
  --purple-light: #c4b5fd;
  --purple-rgb: 167, 139, 250;
  --purple-bg: #f5f3ff;
  --purple-bg-dark: #ede9fe;
}

/* ----------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------- */
:root {
  /* Font families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;

  /* Font sizes - rem scale (base 16px)
     Using rem enables accessibility: respects user's browser font settings */
  --text-micro: 0.5625rem; /* 9px - very small details */
  --text-xxs: 0.625rem;   /* 10px - fine print, captions */
  --text-xs: 0.6875rem;   /* 11px - small labels */
  --text-sm: 0.75rem;     /* 12px - secondary text */
  --text-md: 0.8125rem;   /* 13px - body text (most common) */
  --text-base: 0.875rem;  /* 14px - standard UI text */
  --text-lg: 1rem;        /* 16px - emphasized text */
  --text-xl: 1.125rem;    /* 18px - section headers */
  --text-xl-plus: 1.25rem; /* 20px - large headers */
  --text-2xl: 1.5rem;     /* 24px - page headers */
  --text-2xl-plus: 1.75rem; /* 28px - featured headers */
  --text-3xl-minus: 1.875rem; /* 30px - large featured */
  --text-3xl: 2rem;       /* 32px - hero text */
  --text-3xl-plus: 2.25rem; /* 36px - large hero */
  --text-4xl: 3rem;       /* 48px - display */
  --text-5xl: 3.5rem;     /* 56px - large display */
  --text-6xl: 4.5rem;     /* 72px - massive display */

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

  /* Line heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
}

/* ----------------------------------------
   4. SPACING SCALE
   ---------------------------------------- */
:root {
  /* Spacing - rem scale (base 16px)
     Spacing scales with user's font preference for consistent proportions */
  --space-px: 1px;      /* 1px - hairline spacing */
  --space-0-5: 2px;     /* 2px - minimal spacing */
  --space-1: 0.25rem;   /* 4px - tight spacing */
  --space-1-5: 0.375rem; /* 6px - between tight and small */
  --space-2: 0.5rem;    /* 8px - small spacing */
  --space-2-5: 0.625rem; /* 10px - common half-step */
  --space-3: 0.75rem;   /* 12px - standard spacing */
  --space-4: 1rem;      /* 16px - comfortable spacing */
  --space-5: 1.25rem;   /* 20px - section spacing */
  --space-6: 1.5rem;    /* 24px - large spacing */
  --space-8: 2rem;      /* 32px - extra large */
  --space-10: 2.5rem;   /* 40px - layout spacing */
  --space-12: 3rem;     /* 48px - major sections */
  --space-16: 4rem;     /* 64px - page sections */
  --space-20: 5rem;     /* 80px - hero spacing */
}

/* ----------------------------------------
   5. BORDER RADIUS
   ---------------------------------------- */
:root {
  /* Border radius - kept in px (visual element, shouldn't scale with text) */
  --radius-xxs: 2px;   /* minimal rounding */
  --radius-xs: 4px;    /* subtle rounding */
  --radius-sm: 6px;    /* buttons, inputs */
  --radius-md: 8px;    /* cards, modals */
  --radius-md-plus: 10px; /* slightly larger cards */
  --radius-lg: 12px;   /* large cards */
  --radius-xl: 16px;   /* hero elements */
  --radius-xl-plus: 20px; /* pills, large buttons */
  --radius-2xl: 24px;  /* feature cards */
  --radius-full: 9999px; /* pills, avatars */
}

/* ----------------------------------------
   6. SHADOWS & OVERLAYS
   ---------------------------------------- */
:root {
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.2);

  /* Overlays (backdrops, modals) */
  --overlay-heavy: rgba(0, 0, 0, 0.85);
  --overlay-dark: rgba(0, 0, 0, 0.7);
  --overlay-medium: rgba(0, 0, 0, 0.5);
  --overlay-light: rgba(0, 0, 0, 0.4);
  --overlay-subtle: rgba(0, 0, 0, 0.15);
  --overlay-faint: rgba(0, 0, 0, 0.1);

  /* White overlays (glass effects) */
  --glass-medium: rgba(255, 255, 255, 0.3);
  --glass-subtle: rgba(255, 255, 255, 0.08);
  --glass-faint: rgba(255, 255, 255, 0.05);
  --glass-minimal: rgba(255, 255, 255, 0.03);
}

/* ----------------------------------------
   7. TRANSITIONS
   ---------------------------------------- */
:root {
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ----------------------------------------
   8. Z-INDEX SCALE (layering system)
   ---------------------------------------- */
:root {
  --z-base: 1;        /* default stacking */
  --z-above: 10;      /* slightly elevated elements */
  --z-dropdown: 100;  /* dropdowns, menus */
  --z-sticky: 200;    /* sticky headers */
  --z-overlay: 500;   /* overlays, backdrops */
  --z-modal: 1000;    /* modals, dialogs */
  --z-popover: 1100;  /* popovers on modals */
  --z-tooltip: 1200;  /* tooltips (always on top) */
  --z-toast: 1300;    /* notifications */
}

/* ----------------------------------------
   9. DARK THEME (Command Centre, internal apps)
   ---------------------------------------- */
.theme-dark {
  --bg-primary: var(--brand-navy);
  --bg-secondary: var(--brand-navy-light);
  --bg-tertiary: var(--brand-navy-medium);
  --bg-input: var(--brand-navy-medium);
  --text-primary: #eaeaea;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --border-color: #2a2a4a;
  --accent: var(--brand-coral);
  --accent-hover: var(--brand-coral-light);
  --accent-rgb: 233, 69, 96;
}

.theme-dark body,
body.theme-dark {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ----------------------------------------
   10. LIGHT THEME (Marketing site, public apps)
   ---------------------------------------- */
.theme-light {
  --bg-primary: #ffffff;
  --bg-secondary: var(--gray-50);
  --bg-tertiary: var(--gray-100);
  --bg-input: #ffffff;
  --text-primary: var(--brand-navy);
  --text-secondary: #555555;
  --text-muted: var(--gray-500);
  --border-color: var(--gray-200);
  --accent: var(--brand-coral);
  --accent-hover: var(--brand-coral-light);
  --accent-rgb: 233, 69, 96;
}

.theme-light body,
body.theme-light {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ----------------------------------------
   11. BASE RESET
   ---------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------
   12. UTILITY CLASSES
   ---------------------------------------- */

/* Text colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }

/* Background colors */
.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-accent { background: var(--accent); }

/* ----------------------------------------
   13. BUTTON COMPONENTS
   ---------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 1;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-tertiary);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
}

.btn-ghost:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.1);
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
}

/* ----------------------------------------
   14. CARD COMPONENTS
   ---------------------------------------- */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.card-header {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* ----------------------------------------
   15. INPUT COMPONENTS
   ---------------------------------------- */
.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-normal);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
}

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

/* ----------------------------------------
   16. BADGE COMPONENTS
   ---------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-success {
  background: rgba(var(--success-rgb), 0.2);
  color: var(--success);
}

.badge-warning {
  background: rgba(var(--warning-rgb), 0.2);
  color: var(--warning);
}

.badge-error {
  background: rgba(var(--error-rgb), 0.2);
  color: var(--error);
}

.badge-info {
  background: rgba(var(--info-rgb), 0.2);
  color: var(--info);
}

.badge-purple {
  background: rgba(var(--purple-rgb), 0.2);
  color: var(--purple);
}

/* ----------------------------------------
   17. NAVIGATION & LOGO
   ---------------------------------------- */
:root {
  --nav-height: 70px;
}

.nav-logo {
  display: flex;
  align-items: center;
  height: calc(var(--nav-height) - 10px);  /* nav height minus 5px padding top+bottom */
  padding: 5px 0;
}

.nav-logo img {
  height: 100%;
  width: auto;
}

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

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