/*
==============================================
CSS CUSTOM PROPERTIES (VARIABLES) - DARK MODE ONLY
Based on logo colors: Navy (#1E293B) + Emerald (#10B981)
FORCED DARK MODE - No light mode support
==============================================
*/
:root {
    /* Primary Colors - From Logo */
    --primary: #10B981;              /* Emerald (logo green) */
    --primary-light: #34D399;        /* Light emerald */
    --primary-dark: #059669;         /* Dark emerald */
    --primary-50: rgba(16, 185, 129, 0.05);
    --primary-100: rgba(16, 185, 129, 0.1);
    --primary-200: rgba(16, 185, 129, 0.2);
    --primary-300: rgba(16, 185, 129, 0.3);
    --primary-400: rgba(16, 185, 129, 0.4);
    --primary-500: rgba(16, 185, 129, 0.5);

    /* Logo Navy Color */
    --navy: #1E293B;                 /* Navy blue (logo background) */
    --navy-light: #334155;           /* Lighter navy */
    --navy-dark: #0F172A;            /* Darker navy */

    /* Semantic Colors */
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    /* Neutral Colors - Dark Theme Palette */
    --white: #FFFFFF;
    --gray-50: #F8FAFC;              /* Very light gray-blue */
    --gray-100: #F1F5F9;             /* Light gray-blue */
    --gray-200: #E2E8F0;             /* Soft gray */
    --gray-300: #CBD5E1;             /* Medium-light gray */
    --gray-400: #94A3B8;             /* Medium gray */
    --gray-500: #64748B;             /* Slate gray */
    --gray-600: #475569;             /* Dark slate */
    --gray-700: #334155;             /* Darker slate */
    --gray-800: #1E293B;             /* Navy (logo dark) */
    --gray-900: #0F172A;             /* Darkest navy */
    --black: #000000;

    /* Background Colors - DARK MODE (DEFAULT) */
    --bg-primary: #0F172A;           /* Darkest navy (logo color) */
    --bg-secondary: #1E293B;         /* Navy */
    --bg-light: rgba(255, 255, 255, 0.05);
    --bg-card: rgba(255, 255, 255, 0.05);
    --bg-card-hover: rgba(255, 255, 255, 0.08);

    /* Text Colors - DARK MODE (High Contrast) */
    --text-primary: #FFFFFF;         /* Pure white - 16.8:1 contrast */
    --text-secondary: #E2E8F0;       /* Very light gray - 14.2:1 contrast */
    --text-light: #CBD5E1;           /* Light gray - 11.6:1 contrast */
    --text-muted: #94A3B8;           /* Medium gray - 7.1:1 contrast */
    --text-white: var(--white);
    --text-dark: var(--navy-dark);

    /* Glassmorphism - DARK MODE */
    --glass-white: rgba(255, 255, 255, 0.05);      /* White glass on dark */
    --glass-white-light: rgba(255, 255, 255, 0.05);
    --glass-white-strong: rgba(255, 255, 255, 0.15);
    --glass-dark: rgba(0, 0, 0, 0.3);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-backdrop: blur(20px);

    /* Gradients - DARK MODE */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    --gradient-hero: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Font weights */
    --font-weight-thin: 100;
    --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 heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Spacing */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-32: 8rem;
    
    /* Semantic spacing */
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-2);
    --spacing-md: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);
    --spacing-2xl: var(--spacing-12);
    --spacing-3xl: var(--spacing-16);
    --spacing-4xl: var(--spacing-24);
    
    /* Border radius */
    --radius-none: 0;
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: all 0.15s ease-in-out;
    --transition-base: all 0.25s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;
    
    /* Layout */
    --container-xs: 475px;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    --container-max-width: 1200px;
    --container-padding: var(--spacing-md);
    --navbar-height: 70px;
    --section-padding: var(--spacing-4xl);
    
    /* Interactive Elements */
    --btn-height-sm: 36px;
    --btn-height-md: 44px;
    --btn-height-lg: 56px;
    --btn-height-xl: 64px;
    
    /* Z-index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-navbar: 1040;
    --z-modal-backdrop: 1050;
    --z-modal: 1060;
    --z-popover: 1070;
    --z-tooltip: 1080;
    --z-chatbot: 1090;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --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);
}

/* ==============================================
   DARK MODE ONLY - No adaptive switching
   Light mode support removed
   ============================================== */

/* High Contrast Mode Support (Accessibility) - Dark Mode Only */
@media (prefers-contrast: high) {
    :root {
        /* High contrast dark mode enhancements */
        --text-secondary: #FFFFFF;
        --text-light: #FFFFFF;
        --text-primary: #FFFFFF;
        --glass-white: rgba(255, 255, 255, 0.3);
        --glass-white-strong: rgba(255, 255, 255, 0.5);
        --glass-border: rgba(255, 255, 255, 0.4);
    }
}/* 
==============================================
BASE STYLES & RESET
==============================================
*/

/* CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--gray-800);
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background: var(--gradient-hero);
    background-attachment: fixed;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    font-feature-settings: 'kern' 1, 'liga' 1;
    padding-top: var(--navbar-height);
}

/* Focus styles */
*:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Selection styles */
::selection {
    background: var(--primary-200);
    color: var(--white);
}

::-moz-selection {
    background: var(--primary-200);
    color: var(--white);
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--white);
    margin-bottom: var(--spacing-4);
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: var(--spacing-6);
}

h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-5);
}

h3 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-4);
}

h4 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-3);
}

h5 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-3);
}

h6 {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-2);
}

p {
    margin-bottom: var(--spacing-4);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Links */
a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--primary-light);
    text-decoration: none;
}

a:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Lists */
ul, ol {
    margin-left: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

li {
    margin-bottom: var(--spacing-2);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
}

/* Strong and emphasis */
strong, b {
    font-weight: var(--font-weight-bold);
    color: var(--white);
}

em, i {
    font-style: italic;
    color: var(--text-light);
}

/* Code */
code {
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 0.875em;
    background: var(--glass-white);
    color: var(--primary-light);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
}

pre {
    background: var(--glass-white);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    overflow-x: auto;
    line-height: var(--line-height-relaxed);
}

pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--font-size-sm);
}

/* Blockquotes */
blockquote {
    border-left: 4px solid var(--primary);
    padding-left: var(--spacing-4);
    margin-left: 0;
    margin-bottom: var(--spacing-4);
    font-style: italic;
    color: var(--text-light);
    background: var(--glass-white-light);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-4);
    background: var(--glass-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

th {
    background: var(--glass-white-strong);
    color: var(--white);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
}

td {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

tr:last-child td {
    border-bottom: none;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

/* Horizontal rule */
hr {
    border: none;
    height: 1px;
    background: var(--glass-border);
    margin: var(--spacing-6) 0;
}

/* Form elements base styles */
input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

/* Hide default appearance */
input,
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Remove default styles from buttons */
button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Remove spinner from number inputs */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Remove default search styling */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* Utility for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}/* 
==============================================
LAYOUT SYSTEM
==============================================
*/

/* Container system */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--container-padding);
}

.container-xs { max-width: var(--container-xs); }
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }

/* Section spacing */
.section {
    padding: var(--section-padding) 0;
}

.section-sm {
    padding: var(--spacing-2xl) 0;
}

.section-lg {
    padding: calc(var(--section-padding) * 1.5) 0;
}

.section-hero {
    padding: calc(var(--navbar-height) + var(--section-padding)) 0 var(--section-padding);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
}

/* Grid system */
.grid {
    display: grid;
    gap: var(--spacing-6);
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Simplified grid classes - DEFAULT for card layouts */
.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Mobile responsive - stack on small screens */
@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Auto-fit grid */
.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-auto-fit-sm {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-fit-lg {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* Grid gaps */
.gap-0 { gap: 0; }
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }
.gap-12 { gap: var(--spacing-12); }
.gap-16 { gap: var(--spacing-16); }

/* Column span */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-full { grid-column: 1 / -1; }

/* Row span */
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }

/* Flexbox system */
.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

/* Flex direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Flex wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

/* Flex grow and shrink */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

.flex-grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }

.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Justify content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align content */
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-evenly { align-content: space-evenly; }

/* Align self */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.self-baseline { align-self: baseline; }

/* Place items */
.place-items-start { place-items: start; }
.place-items-end { place-items: end; }
.place-items-center { place-items: center; }
.place-items-stretch { place-items: stretch; }

/* Place content */
.place-content-start { place-content: start; }
.place-content-end { place-content: end; }
.place-content-center { place-content: center; }
.place-content-between { place-content: space-between; }
.place-content-around { place-content: space-around; }
.place-content-evenly { place-content: space-evenly; }
.place-content-stretch { place-content: stretch; }

/* Place self */
.place-self-auto { place-self: auto; }
.place-self-start { place-self: start; }
.place-self-end { place-self: end; }
.place-self-center { place-self: center; }
.place-self-stretch { place-self: stretch; }

/* Common layout patterns */
.hero {
    text-align: center;
    padding: calc(var(--navbar-height) + var(--spacing-4xl)) 0 var(--spacing-4xl);
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.content-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.content-container {
    background: var(--glass-white);
    backdrop-filter: var(--glass-backdrop);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

/* Two column layout */
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

/* Sidebar layout */
.sidebar-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

/* Center content */
.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-vertical {
    display: flex;
    align-items: center;
}

.center-horizontal {
    display: flex;
    justify-content: center;
}

/* Responsive design breakpoints */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-6);
    }
    
    .sidebar-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .two-column {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-4);
    }
    
    .section {
        padding: var(--spacing-3xl) 0;
    }
    
    .section-hero {
        padding: calc(var(--navbar-height) + var(--spacing-3xl)) 0 var(--spacing-3xl);
    }
    
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: 1fr;
    }
    
    .grid-auto-fit {
        grid-template-columns: 1fr;
    }
    
    .hero {
        padding: calc(var(--navbar-height) + var(--spacing-3xl)) 0 var(--spacing-3xl);
    }
    
    .content-container {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-3);
    }
    
    .section {
        padding: var(--spacing-2xl) 0;
    }
    
    .section-hero {
        padding: calc(var(--navbar-height) + var(--spacing-2xl)) 0 var(--spacing-2xl);
    }
    
    .hero {
        padding: calc(var(--navbar-height) + var(--spacing-2xl)) 0 var(--spacing-2xl);
    }
    
    .content-container {
        padding: var(--spacing-md);
        border-radius: var(--radius-lg);
    }
}