/* ================================================
   MASTER CSS VARIABLES - Enterprise Design System
   OriumAI v2.0 - Single Source of Truth
   ================================================ */

/* ================================================
   1. GLOBAL ROOT VARIABLES (All Viewports)
   ================================================ */
:root {
  /* ============ BRAND COLORS ============ */
  --color-primary: #5D4CDA;
  --color-primary-light: #7867E8;
  --color-primary-dark: #4A3CB8;
  --color-primary-50: rgba(93, 76, 218, 0.05);
  --color-primary-100: rgba(93, 76, 218, 0.1);
  --color-primary-200: rgba(93, 76, 218, 0.2);

  /* ============ SEMANTIC COLORS ============ */
  --color-success: #10B981;
  --color-success-light: #34D399;
  --color-success-dark: #059669;
  --color-success-bg: rgba(16, 185, 129, 0.1);

  --color-warning: #F59E0B;
  --color-warning-light: #FBBF24;
  --color-warning-dark: #D97706;
  --color-warning-bg: rgba(245, 158, 11, 0.1);

  --color-danger: #EF4444;
  --color-danger-light: #F87171;
  --color-danger-dark: #DC2626;
  --color-danger-bg: rgba(239, 68, 68, 0.1);

  --color-info: #3B82F6;
  --color-info-light: #60A5FA;
  --color-info-dark: #2563EB;
  --color-info-bg: rgba(59, 130, 246, 0.1);

  /* ============ CREDIT SCORE COLORS ============ */
  --score-excellent: #10B981;    /* 750-850 */
  --score-very-good: #34D399;    /* 700-749 */
  --score-good: #FBBF24;         /* 650-699 */
  --score-fair: #F59E0B;         /* 580-649 */
  --score-poor: #EF4444;         /* 300-579 */

  /* ============ TEXT COLORS ============ */
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --text-disabled: #CBD5E1;
  --text-inverse: #FFFFFF;
  --text-link: var(--color-primary);
  --text-link-hover: var(--color-primary-dark);

  /* ============ BACKGROUND COLORS ============ */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary: #F1F5F9;
  --bg-quaternary: #E2E8F0;
  --bg-dark: #1E293B;
  --bg-darker: #0F172A;

  /* ============ BORDER COLORS ============ */
  --border-light: #E2E8F0;
  --border-medium: #CBD5E1;
  --border-dark: #94A3B8;
  --border-focus: var(--color-primary);

  /* ============ SHADOW SYSTEM ============ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px 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 rgba(0, 0, 0, 0.06);
  --shadow-primary: 0 4px 14px rgba(93, 76, 218, 0.25);
  --shadow-success: 0 4px 14px rgba(16, 185, 129, 0.25);
  --shadow-danger: 0 4px 14px rgba(239, 68, 68, 0.25);

  /* ============ TYPOGRAPHY ============ */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --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 */
  --text-5xl: 3rem;       /* 48px */

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

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ============ SPACING SCALE ============ */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

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

  /* ============ TRANSITIONS ============ */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-slower: 600ms ease;

  /* Easing Functions */
  --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);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ============ Z-INDEX SCALE ============ */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-fixed: 1000;
  --z-fab: 1000;
  --z-nav: 1010;
  --z-overlay: 1050;
  --z-sidebar: 1070;
  --z-hamburger: 1080;
  --z-modal-backdrop: 1085;
  --z-modal: 1090;
  --z-toast: 1100;
  --z-tooltip: 1200;
  --z-max: 9999;

  /* ============ LAYOUT ============ */
  --nav-height: 64px;
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 72px;
  --footer-height: 60px;
  --container-max-width: 1400px;
  --content-max-width: 1200px;

  /* ============ TOUCH TARGETS ============ */
  --touch-target-min: 44px;
  --touch-target-preferred: 48px;
}

/* ================================================
   2. COMPONENT-SPECIFIC VARIABLES
   ================================================ */
:root {
  /* ============ CARDS ============ */
  --card-padding: var(--space-6);
  --card-padding-sm: var(--space-4);
  --card-radius: var(--radius-xl);
  --card-shadow: var(--shadow-md);
  --card-bg: var(--bg-primary);
  --card-border: var(--border-light);

  /* ============ BUTTONS ============ */
  --btn-height: 44px;
  --btn-height-sm: 36px;
  --btn-height-lg: 52px;
  --btn-padding-x: var(--space-6);
  --btn-padding-x-sm: var(--space-4);
  --btn-padding-x-lg: var(--space-8);
  --btn-radius: var(--radius-md);
  --btn-font-weight: var(--font-semibold);

  /* Primary Button */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-bg-hover: var(--color-primary-dark);
  --btn-primary-text: var(--text-inverse);
  --btn-primary-shadow: var(--shadow-primary);

  /* Secondary Button */
  --btn-secondary-bg: var(--bg-tertiary);
  --btn-secondary-bg-hover: var(--bg-quaternary);
  --btn-secondary-text: var(--text-primary);

  /* Success Button */
  --btn-success-bg: var(--color-success);
  --btn-success-bg-hover: var(--color-success-dark);
  --btn-success-text: var(--text-inverse);

  /* Danger Button */
  --btn-danger-bg: var(--color-danger);
  --btn-danger-bg-hover: var(--color-danger-dark);
  --btn-danger-text: var(--text-inverse);

  /* ============ FORM INPUTS ============ */
  --input-height: 44px;
  --input-height-sm: 36px;
  --input-height-lg: 52px;
  --input-padding-x: var(--space-4);
  --input-padding-y: var(--space-3);
  --input-radius: var(--radius-md);
  --input-border: var(--border-medium);
  --input-border-focus: var(--color-primary);
  --input-bg: var(--bg-primary);
  --input-bg-disabled: var(--bg-tertiary);
  --input-placeholder: var(--text-muted);

  /* ============ BADGES/PILLS ============ */
  --badge-height: 24px;
  --badge-padding-x: var(--space-3);
  --badge-radius: var(--radius-full);
  --badge-font-size: var(--text-xs);
  --badge-font-weight: var(--font-medium);

  /* ============ TABLES ============ */
  --table-header-bg: var(--bg-secondary);
  --table-row-hover: var(--bg-tertiary);
  --table-border: var(--border-light);
  --table-cell-padding: var(--space-4);

  /* ============ MODALS ============ */
  --modal-radius: var(--radius-xl);
  --modal-shadow: var(--shadow-2xl);
  --modal-padding: var(--space-6);
  --modal-header-padding: var(--space-5) var(--space-6);
  --modal-footer-padding: var(--space-4) var(--space-6);
  --modal-backdrop: rgba(15, 23, 42, 0.6);

  /* ============ DROPDOWNS ============ */
  --dropdown-radius: var(--radius-lg);
  --dropdown-shadow: var(--shadow-lg);
  --dropdown-padding: var(--space-2);
  --dropdown-item-padding: var(--space-3) var(--space-4);
  --dropdown-item-hover: var(--bg-tertiary);

  /* ============ TOOLTIPS ============ */
  --tooltip-bg: var(--bg-dark);
  --tooltip-text: var(--text-inverse);
  --tooltip-radius: var(--radius-md);
  --tooltip-padding: var(--space-2) var(--space-3);

  /* ============ PROGRESS BARS ============ */
  --progress-height: 8px;
  --progress-height-sm: 4px;
  --progress-height-lg: 12px;
  --progress-radius: var(--radius-full);
  --progress-bg: var(--bg-tertiary);
  --progress-fill: var(--color-primary);

  /* ============ ALERTS ============ */
  --alert-padding: var(--space-4);
  --alert-radius: var(--radius-lg);
  --alert-border-width: 1px;
}

/* ================================================
   3. RESPONSIVE OVERRIDES (Tablet)
   ================================================ */
@media (max-width: 992px) {
  :root {
    /* Layout adjustments */
    --sidebar-width: 0px;
    --side-w: 0px;

    /* Spacing reductions */
    --card-padding: var(--space-4);
    --modal-padding: var(--space-4);

    /* Mobile navigation */
    --mobile-nav-height: 64px;
    --mobile-sidebar-width: 280px;
    --mobile-padding: 16px;
    --mobile-radius: 12px;
  }
}

/* ================================================
   4. RESPONSIVE OVERRIDES (Mobile)
   ================================================ */
@media (max-width: 576px) {
  :root {
    /* Further spacing reductions */
    --card-padding: var(--space-3);
    --modal-padding: var(--space-3);
    --btn-padding-x: var(--space-4);

    /* Typography adjustments */
    --text-4xl: 2rem;
    --text-5xl: 2.5rem;
  }
}

/* ================================================
   5. PWA STANDALONE MODE
   ================================================ */
@media (display-mode: standalone) {
  :root {
    /* Force mobile layout in PWA */
    --sidebar-width: 0px;
    --side-w: 0px;
    --nav-height: 64px;

    /* Safe area handling */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
  }
}

/* ================================================
   6. DARK MODE SUPPORT (Future)
   ================================================ */
@media (prefers-color-scheme: dark) {
  :root.dark-mode-enabled {
    /* Dark mode color overrides would go here */
    /* Currently disabled - uncomment when implementing */
    /*
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --bg-primary: #1E293B;
    --bg-secondary: #0F172A;
    --border-light: #334155;
    */
  }
}

/* ================================================
   7. UTILITY CSS CLASSES (Using Variables)
   ================================================ */

/* Text Colors */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-brand { color: var(--color-primary) !important; }

/* Background Colors */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }
.bg-brand { background-color: var(--color-primary) !important; }
.bg-success-subtle { background-color: var(--color-success-bg) !important; }
.bg-warning-subtle { background-color: var(--color-warning-bg) !important; }
.bg-danger-subtle { background-color: var(--color-danger-bg) !important; }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-primary { box-shadow: var(--shadow-primary) !important; }

/* Transitions */
.transition-fast { transition: all var(--transition-fast) !important; }
.transition-base { transition: all var(--transition-base) !important; }
.transition-slow { transition: all var(--transition-slow) !important; }

/* Credit Score Badge Colors */
.score-excellent {
  color: var(--score-excellent) !important;
  background-color: rgba(16, 185, 129, 0.1) !important;
}
.score-very-good {
  color: var(--score-very-good) !important;
  background-color: rgba(52, 211, 153, 0.1) !important;
}
.score-good {
  color: var(--score-good) !important;
  background-color: rgba(251, 191, 36, 0.1) !important;
}
.score-fair {
  color: var(--score-fair) !important;
  background-color: rgba(245, 158, 11, 0.1) !important;
}
.score-poor {
  color: var(--score-poor) !important;
  background-color: rgba(239, 68, 68, 0.1) !important;
}