/* Design System - Modern Color Palette & Design Tokens */
/* Updated: December 15, 2025 - Phase 46.2 */

:root {
  /* ===== PRIMARY MUTED RED PALETTE ===== */
  --color-primary: #c73a48;
  --color-primary-dark: #a82d39;
  --color-primary-light: #e8969e;
  --color-primary-darker: #8b3a4a;
  --color-primary-lightest: #f5d5da;

  /* Legacy aliases for backward compatibility */
  --color-primary-accent: #d95a68;
  --color-primary-light-tint: #f5d5da;
  --color-primary-dark-shade: #8b3a4a;

  /* ===== SECONDARY MODERN BLUE PALETTE ===== */
  --color-secondary: #2563eb;
  --color-secondary-dark: #1e40af;
  --color-secondary-light: #bfdbfe;
  --color-secondary-darker: #0c2340;
  --color-secondary-lightest: #dbeafe;

  /* Legacy aliases */
  --color-secondary-accent: #0096ff;
  --color-secondary-light-tint: #dbeafe;
  --color-secondary-dark-shade: #1e40af;

  /* ===== SEMANTIC STATUS COLORS ===== */
  --color-success: #10b981;
  --color-success-dark: #059669;
  --color-success-light: #d1fae5;

  --color-warning: #f59e0b;
  --color-warning-dark: #d97706;
  --color-warning-light: #fef3c7;

  --color-error: #e11d48;
  --color-error-dark: #be123c;
  --color-error-light: #ffe4e6;

  --color-info: #0ea5e9;
  --color-info-dark: #0369a1;
  --color-info-light: #e0f2fe;

  /* ===== ACCENT COLORS ===== */
  --color-gold: #f1c40f;
  --color-gold-light: #f9e79f;
  --color-gold-dark: #d4a017;

  --color-teal: #1abc9c;
  --color-teal-light: #48dbfb;
  --color-teal-dark: #0b7285;

  --color-navy: #0074d9;
  --color-navy-light: #0096ff;
  --color-navy-dark: #004a9d;

  --color-purple: #9b59b6;
  --color-purple-light: #c39bd3;
  --color-purple-dark: #6c3483;

  --color-pink: #ff1493;
  --color-pink-light: #ff69b4;
  --color-pink-dark: #c71585;

  /* ===== BACKGROUND COLORS ===== */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8fbff;
  --color-bg-tertiary: #eff2f7;
  --color-bg-accent: #faf5f3;

  /* ===== TEXT COLORS ===== */
  --color-text-primary: #1a1a2e;
  --color-text-secondary: #4a5568;
  --color-text-tertiary: #718096;
  --color-text-muted: #a0aec0;

  /* ===== BORDER COLORS ===== */
  --color-border: #d4d9e3;
  --color-border-light: #e8ecf4;
  --color-border-dark: #b4bcd4;

  /* ===== UTILITY COLORS ===== */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;

  /* ===== TYPOGRAPHY ===== */
  --font-family-base: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Monaco', 'Courier New', monospace;

  --font-size-xs: 0.875rem;
  --font-size-sm: 1rem;
  --font-size-base: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 3rem;
  --font-size-5xl: 3.75rem;

  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --line-height-tight: 1.4;
  --line-height-snug: 1.5;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* ===== SPACING SCALE ===== */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;
  --space-4xl: 3.5rem;

  /* ===== BORDER RADIUS ===== */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-none: none;

  /* ===== TRANSITIONS & ANIMATIONS ===== */
  --transition-fast: all 0.15s ease-in-out;
  --transition-base: all 0.3s ease-in-out;
  --transition-slow: all 0.5s ease-in-out;

  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Z-INDEX SCALE ===== */
  --z-hide: -1;
  --z-auto: auto;
  --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;
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #0f0f1e;
    --color-bg-secondary: #1a1a2e;
    --color-bg-tertiary: #242436;
    --color-bg-accent: #2a2018;

    --color-text-primary: #f5f5ff;
    --color-text-secondary: #d0d0d8;
    --color-text-tertiary: #a0a0a8;
    --color-text-muted: #707078;

    --color-border: #3a3a48;
    --color-border-light: #2a2a38;
    --color-border-dark: #4a4a58;
  }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: none;
    --transition-base: none;
    --transition-slow: none;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== RESET & BASE STYLES ===== */
[hidden],
.d-none {
  display: none !important;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  margin: 0;
  padding: 0;
}

/* ===== TYPOGRAPHY DEFAULTS ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin-top: 0;
}

h1 {
  font-size: var(--font-size-5xl);
}

h2 {
  font-size: var(--font-size-4xl);
}

h3 {
  font-size: var(--font-size-3xl);
}

h4 {
  font-size: var(--font-size-2xl);
}

h5 {
  font-size: var(--font-size-xl);
}

h6 {
  font-size: var(--font-size-lg);
}

p {
  margin: 0;
}

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--color-secondary-dark);
  text-decoration: underline;
}

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

/* Text Colors */
.text-primary {
  color: var(--color-primary);
}

.text-primary-dark {
  color: var(--color-primary-dark);
}

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

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

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

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

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

/* Background Colors */
.bg-primary {
  background-color: var(--color-primary);
}

.bg-primary-light {
  background-color: var(--color-primary-light);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-success {
  background-color: var(--color-success);
}

.bg-warning {
  background-color: var(--color-warning);
}

.bg-error {
  background-color: var(--color-error);
}

.bg-info {
  background-color: var(--color-info);
}

/* Border Colors */
.border-primary {
  border-color: var(--color-primary);
}

.border-secondary {
  border-color: var(--color-secondary);
}

.border-success {
  border-color: var(--color-success);
}

.border-warning {
  border-color: var(--color-warning);
}

.border-error {
  border-color: var(--color-error);
}

.border-info {
  border-color: var(--color-info);
}

/* ===== GRADIENT UTILITIES ===== */

.gradient-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.gradient-primary-horizontal {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
}

.gradient-success {
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
}

/* ===== SHADOW UTILITIES ===== */

.shadow-xs {
  box-shadow: var(--shadow-xs);
}

.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-2xl {
  box-shadow: var(--shadow-2xl);
}

/* ===== TRANSITION UTILITIES ===== */

.transition-fast {
  transition: var(--transition-fast);
}

.transition-base {
  transition: var(--transition-base);
}

.transition-slow {
  transition: var(--transition-slow);
}

/* ===== FOCUS & FOCUS-VISIBLE STATES ===== */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* End of design-system.css */