/**
 * TradePrepared Design System
 * Centralized design tokens and variables
 * Following Atomic Design and best practices
 * 
 * Color Scheme:
 * - Primary Blue: #2487ce (trust, professionalism)
 * - Dark Blue: #124265 (headings, authority)
 * - Success Green: #28a745 (positive actions)
 * - Danger Red: #dc3545 (warnings, errors)
 * - Gray Scale: Neutral tones for text and backgrounds
 * 
 * © 2026 Marenno - TradePrepared
 */

/* ===== Design Tokens ===== */
:root {
  /* Brand Colors */
  --tp-primary: #2487ce;
  --tp-primary-dark: #1a6ba8;
  --tp-primary-light: #4a9dd9;
  --tp-primary-lighter: #e8f4fb;
  
  --tp-secondary: #124265;
  --tp-secondary-dark: #0d3149;
  --tp-secondary-light: #1a5a8a;
  
  /* Semantic Colors */
  --tp-success: #28a745;
  --tp-success-light: #d4edda;
  --tp-warning: #ffc107;
  --tp-warning-light: #fff3cd;
  --tp-danger: #dc3545;
  --tp-danger-light: #f8d7da;
  --tp-info: #17a2b8;
  --tp-info-light: #d1ecf1;
  
  /* Neutral Colors */
  --tp-white: #ffffff;
  --tp-gray-50: #f8f9fa;
  --tp-gray-100: #f6fafd;
  --tp-gray-200: #e9ecef;
  --tp-gray-300: #dee2e6;
  --tp-gray-400: #ced4da;
  --tp-gray-500: #adb5bd;
  --tp-gray-600: #6c757d;
  --tp-gray-700: #495057;
  --tp-gray-800: #343a40;
  --tp-gray-900: #212529;
  --tp-black: #000000;
  
  /* Text Colors */
  --tp-text-primary: #444444;
  --tp-text-secondary: #6c757d;
  --tp-text-muted: #999999;
  --tp-text-heading: #124265;
  
  /* Background Colors */
  --tp-bg-primary: #ffffff;
  --tp-bg-secondary: #f8f9fa;
  --tp-bg-tertiary: #f6fafd;
  
  /* Border Colors */
  --tp-border-light: rgba(0, 0, 0, 0.1);
  --tp-border-medium: rgba(0, 0, 0, 0.2);
  
  /* Shadow */
  --tp-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --tp-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --tp-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
  
  /* Spacing (based on 8px grid) */
  --tp-spacing-xs: 0.5rem;   /* 8px */
  --tp-spacing-sm: 1rem;     /* 16px */
  --tp-spacing-md: 1.5rem;   /* 24px */
  --tp-spacing-lg: 2rem;     /* 32px */
  --tp-spacing-xl: 3rem;     /* 48px */
  --tp-spacing-xxl: 4rem;    /* 64px */
  
  /* Typography */
  --tp-font-family-base: "Roboto", system-ui, -apple-system, sans-serif;
  --tp-font-family-heading: "Raleway", sans-serif;
  --tp-font-family-nav: "Poppins", sans-serif;
  
  --tp-font-size-xs: 0.75rem;    /* 12px */
  --tp-font-size-sm: 0.875rem;   /* 14px */
  --tp-font-size-base: 1rem;     /* 16px */
  --tp-font-size-lg: 1.125rem;   /* 18px */
  --tp-font-size-xl: 1.25rem;    /* 20px */
  --tp-font-size-2xl: 1.5rem;    /* 24px */
  --tp-font-size-3xl: 2rem;      /* 32px */
  --tp-font-size-4xl: 2.5rem;    /* 40px */
  
  /* Border Radius */
  --tp-radius-sm: 4px;
  --tp-radius-md: 8px;
  --tp-radius-lg: 12px;
  --tp-radius-xl: 16px;
  --tp-radius-full: 9999px;
  
  /* Transitions */
  --tp-transition-fast: 150ms ease;
  --tp-transition-base: 300ms ease;
  --tp-transition-slow: 500ms ease;
  
  /* Z-Index Scale */
  --tp-z-dropdown: 1000;
  --tp-z-sticky: 1010;
  --tp-z-fixed: 1020;
  --tp-z-modal-backdrop: 1030;
  --tp-z-modal: 1040;
  --tp-z-popover: 1050;
  --tp-z-tooltip: 1060;
}

/* ===== Legacy Variable Mapping ===== */
/* Map existing variables to new design system */
:root {
  --background-color: var(--tp-bg-primary);
  --default-color: var(--tp-text-primary);
  --heading-color: var(--tp-text-heading);
  --accent-color: var(--tp-primary);
  --surface-color: var(--tp-bg-primary);
  --contrast-color: var(--tp-white);
  
  --nav-color: var(--tp-secondary);
  --nav-hover-color: var(--tp-primary);
  --nav-mobile-background-color: var(--tp-white);
  --nav-dropdown-background-color: var(--tp-white);
  --nav-dropdown-color: var(--tp-secondary);
  --nav-dropdown-hover-color: var(--tp-primary);
  
  --default-font: var(--tp-font-family-base);
  --heading-font: var(--tp-font-family-heading);
  --nav-font: var(--tp-font-family-nav);
}

/* ===== Utility Classes ===== */
.tp-text-primary { color: var(--tp-primary) !important; }
.tp-text-secondary { color: var(--tp-secondary) !important; }
.tp-text-success { color: var(--tp-success) !important; }
.tp-text-danger { color: var(--tp-danger) !important; }
.tp-text-muted { color: var(--tp-text-muted) !important; }

.tp-bg-primary { background-color: var(--tp-primary) !important; }
.tp-bg-secondary { background-color: var(--tp-bg-secondary) !important; }
.tp-bg-light { background-color: var(--tp-gray-50) !important; }

/* ===== Component-Specific Overrides ===== */
/* Ensure consistent styling across components */

.btn-primary {
  background-color: var(--tp-primary);
  border-color: var(--tp-primary);
}

.btn-primary:hover {
  background-color: var(--tp-primary-dark);
  border-color: var(--tp-primary-dark);
}

.btn-outline-primary {
  color: var(--tp-primary);
  border-color: var(--tp-primary);
}

.btn-outline-primary:hover {
  background-color: var(--tp-primary);
  border-color: var(--tp-primary);
  color: var(--tp-white);
}

/* Links */
a {
  color: var(--tp-primary);
}

a:hover {
  color: var(--tp-primary-dark);
}

/* Cards */
.card {
  border-color: var(--tp-border-light);
  box-shadow: var(--tp-shadow-sm);
}

.card:hover {
  box-shadow: var(--tp-shadow-md);
}

/* ===== Sticky Footer ===== */
html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

main.main {
  flex: 1 0 auto;
}

footer.footer {
  flex-shrink: 0;
  margin-top: auto;
}