/* ==========================================================================
   BASE.CSS - Foundation Styles
   CSS Variables, Resets, and Core Configuration
   ========================================================================== */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================================================== */

:root {
    /* Brand Colors - Vortex Green as primary */
    --primary-color: #4a9d4a;
    --primary-rgb: 74, 157, 74;

    /* Modern Tech Palette */
    --secondary-color: #2563eb;      /* Deep Blue for trust & reliability */
    --accent-color: #f59e0b;         /* Amber for CTAs & energy */
    --accent-purple: #8b5cf6;        /* Purple for AI/innovation */
    --accent-teal: #06b6d4;          /* Teal for tech elements */
    --accent-rose: #ec4899;          /* Rose for highlights */

    /* Enhanced Color Values */
    --secondary-rgb: 37, 99, 235;
    --accent-rgb: 245, 158, 11;
    --purple-rgb: 139, 92, 246;
    --teal-rgb: 6, 182, 212;
    --rose-rgb: 236, 72, 153;

    /* Background & Neutrals */
    --light-bg: #f8fafc;
    --dark-bg: #1e293b;
    --text-light: #ffffff;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --text-primary: #333333;

    /* Interactive States */
    --hover-bg: #f8f9fa;
    --border-color: rgba(0, 0, 0, 0.1);

    /* Design System */
    --border-radius: 12px;
    --box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;

    /* Modern Gradients */
    --gradient-primary: linear-gradient(135deg, rgba(74, 157, 74, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
    --gradient-hero: linear-gradient(135deg, #1e293b 0%, #334155 30%, #475569 70%, #1e293b 100%);
    --gradient-card: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
    --gradient-tech: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);

    /* Standardized Responsive Breakpoints (Bootstrap 5) */
    --breakpoint-xs: 576px;   /* Small devices (landscape phones) */
    --breakpoint-sm: 768px;   /* Medium devices (tablets) */
    --breakpoint-md: 992px;   /* Large devices (desktops) */
    --breakpoint-lg: 1200px;  /* Extra large devices (large desktops) */
    --breakpoint-xl: 1400px;  /* Extra extra large devices */

    /* Z-Index Management System */
    /* Base levels: 0-99 */
    --z-base: 0;              /* Default page content */
    --z-content: 1;           /* General content layers */
    --z-overlay: 2;           /* Background overlays */
    --z-hero: 10;             /* Hero section content */

    /* UI Elements: 100-999 */
    --z-ui-low: 100;          /* Low priority UI elements */
    --z-ui-medium: 200;       /* Medium priority UI elements */
    --z-ui-high: 300;         /* High priority UI elements */
    --z-cards: 100;           /* Cards and content blocks */
    --z-tooltips: 500;        /* Tooltips and hints */

    /* Navigation: 1000-1099 */
    --navbar-height: 70px;    /* Navigation bar height */
    --z-nav-base: 1000;       /* Main navigation */
    --z-nav-dropdown: 1010;   /* Navigation dropdowns */
    --z-nav-mobile: 1020;     /* Mobile navigation */
    --z-nav-language: 1030;   /* Language switcher */

    /* Modals and Overlays: 1100-1199 */
    --z-modal-backdrop: 1100; /* Modal backgrounds */
    --z-modal: 1110;          /* Modal content */
    --z-modal-header: 1120;   /* Modal headers */

    /* Chat and Assistants: 1200-1299 */
    --z-chat-widget: 1200;    /* Chat widget base */
    --z-chat-container: 1210; /* Chat container */
    --z-chat-header: 1220;    /* Chat header */

    /* Notifications: 1300-1399 */
    --z-notification: 1300;   /* Notification system */
    --z-toast: 1310;          /* Toast messages */
    --z-alert: 1320;          /* Alert dialogs */

    /* Critical: 1400+ */
    --z-loading: 1400;        /* Loading overlays */
    --z-debug: 9999;          /* Debug elements */

    /* Safe Area Handling for Modern Devices */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Dark Theme Variables */
[data-theme="dark"] {
    --light-bg: #2d2d2d;
    --text-dark: #ffffff;
    --text-muted: #adb5bd;
    --secondary-color: #ffffff;
}

/* ==========================================================================
   GLOBAL RESET & FOUNDATION
   ========================================================================== */

/* Box sizing reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

/* Root and body foundation */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--light-bg);
    transition: var(--transition);
    overflow-x: hidden;
    padding-top: max(70px, calc(70px + var(--safe-area-inset-top)));
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
    max-width: 100vw;
    margin: 0;
}

/* ==========================================================================
   GLOBAL OVERFLOW CONTAINMENT
   ========================================================================== */

/* Container overflow protection */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    overflow-x: hidden;
    max-width: 100%;
    padding-left: max(15px, var(--safe-area-inset-left));
    padding-right: max(15px, var(--safe-area-inset-right));
}

/* Row overflow protection */
.row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* Column overflow protection */
[class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Section and content area protection */
section, .section, main, article, aside, header, footer {
    max-width: 100%;
    overflow-x: hidden;
}

/* Media overflow protection */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Text overflow protection */
h1, h2, h3, h4, h5, h6, p, span, div {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}