/* Marketing Platform Design System - Core CSS Custom Properties */

:root {
  /* Primary Color Palette */
  --navy-50: #f0f4f8;
  --navy-100: #dde8f0;
  --navy-200: #bdd1e1;
  --navy-300: #94b8d0;
  --navy-400: #6b9ac2;
  --navy-500: #4477aa;  /* Secondary Blue */
  --navy-600: #2c5282;  /* Secondary */
  --navy-700: #1e3a5f;  /* Primary Navy */
  --navy-800: #152941;
  --navy-900: #0d1825;

  /* Neutral Scale */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Semantic Colors - B2B Professional Palette (Muted & Trustworthy) */
  --success-100: #dcfce7;  /* Light green for backgrounds */
  --success-500: #16a34a;  /* Forest green - professional, trustworthy */
  --success-600: #15803d;  /* Deeper green for emphasis */

  --warning-100: #fef3c7;  /* Light amber for backgrounds */
  --warning-500: #d97706;  /* Professional amber - clear without alarm */
  --warning-600: #b45309;  /* Rich amber for emphasis */

  --error-100: #fee2e2;    /* Light red for backgrounds */
  --error-500: #dc2626;    /* Professional red - serious, not alarming */
  --error-600: #b91c1c;    /* Deep red for emphasis */

  --info-100: #e0e7ff;     /* Light indigo for backgrounds */
  --info-500: #4f46e5;     /* Indigo - sophisticated, doesn't compete with navy */
  --info-600: #4338ca;     /* Deep indigo for emphasis */

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Monaco, Inconsolata, "Roboto Mono", Consolas, "Courier New", monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 0.875rem; /* 14px - Optimized for dashboard information density */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */

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

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

  /* Spacing Scale - 8px Grid System (Industry Standard) */
  /* Use --space-1 (4px) sparingly as half-step only for icons/tight spaces */
  --space-1: 0.25rem;   /* 4px - Half-step for icons/tight spaces */
  --space-2: 0.5rem;    /* 8px - Base unit ✓ */
  --space-3: 1rem;      /* 16px - 2x base ✓ */
  --space-4: 1.5rem;    /* 24px - 3x base ✓ */
  --space-5: 2rem;      /* 32px - 4x base ✓ */
  --space-6: 2.5rem;    /* 40px - 5x base ✓ */
  --space-8: 3rem;      /* 48px - 6x base ✓ */
  --space-10: 4rem;     /* 64px - 8x base ✓ */
  --space-12: 5rem;     /* 80px - 10x base ✓ */
  --space-16: 6rem;     /* 96px - 12x base ✓ */

  /* Two-Layer Shadow System */
  --shadow-sm:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 1px 2px rgba(0,0,0,0.1);

  --shadow-md:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 3px 6px rgba(0,0,0,0.15);

  --shadow-lg:
    inset 0 2px 0 rgba(255,255,255,0.2),
    0 6px 12px rgba(0,0,0,0.2);

  --shadow-hover:
    inset 0 2px 0 rgba(255,255,255,0.25),
    0 8px 16px rgba(0,0,0,0.25);

  /* Transitions */
  --transition-fast: 0.2s ease-out;
  --transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s ease-in;

  /* Border Radius */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */

  /* 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;
}

/* Base Typography */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--gray-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading Styles */
h1, .h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--navy-900);
  line-height: var(--leading-tight);
}

h2, .h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--navy-800);
  line-height: var(--leading-tight);
}

h3, .h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  color: var(--navy-700);
  line-height: var(--leading-normal);
}

h4, .h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--navy-700);
  line-height: var(--leading-normal);
}

h5, .h5 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--navy-700);
  line-height: var(--leading-normal);
}

h6, .h6 {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--navy-700);
  line-height: var(--leading-normal);
}

/* Responsive Typography */
@media (max-width: 768px) {
  :root {
    --text-3xl: 1.5rem;  /* 24px */
    --text-2xl: 1.25rem; /* 20px */
    --text-xl: 1.125rem; /* 18px */
  }
}

/* Focus Styles */
.focus-visible-custom {
  outline: 2px solid var(--navy-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Custom Selection Colors */
::selection {
  background-color: var(--navy-100);
  color: var(--navy-900);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

/* Override Bootstrap Variables */
:root {
  --bs-primary: var(--navy-700);
  --bs-primary-rgb: 30, 58, 95;
  --bs-secondary: var(--gray-500);
  --bs-success: var(--success-500);
  --bs-danger: var(--error-500);
  --bs-warning: var(--warning-500);
  --bs-info: var(--info-500);
  --bs-light: var(--gray-100);
  --bs-dark: var(--navy-900);
}