/* Base Styles - Reset, Variables, and Typography */

/* ==============================================
   CSS RESET AND NORMALIZATION
   ============================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================== */
:root {
    /* Kloud Stax Brand Colors */
    --kloud-cyan: #2FF3E0;
    --kloud-light-gray: #E6E3DD;
    --kloud-charcoal: #2B2B2B;
    --kloud-white: #FFFFFF;
    
    /* Primary color scheme for dark mode */
    /* Note: Using --kloud-cyan instead of these variables for consistency */
    
    /* Dark mode backgrounds */
    --dark-bg: #1a1a1a;
    --darker-bg: #151515;
    --light-bg: #2B2B2B;
    --card-bg: #333333;
    
    /* Text colors for dark mode */
    --white: #FFFFFF;
    --light-text: #E6E3DD;
    --medium-text: #B8B5B0;
    --dark-text: #8A8782;
    
    /* Grays adjusted for dark mode */
    --gray-100: #3a3a3a;
    --gray-200: #404040;
    --gray-300: #4a4a4a;
    --gray-400: #606060;
    --gray-500: #808080;
    --gray-600: #a0a0a0;
    --gray-700: #E6E3DD;
    --gray-800: #2B2B2B;
    
    /* Shadows for dark mode */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 20px rgba(47, 243, 224, 0.1);
    
    --border-radius: 8px;
    --transition: all 0.3s ease;
    
    /* Responsive Breakpoints */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    
    /* Consistent Spacing System */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-2xl: 3rem;    /* 48px */
    --spacing-3xl: 4rem;    /* 64px */
    --spacing-4xl: 5rem;    /* 80px */
    --spacing-5xl: 6rem;    /* 96px */
    
    /* Container Padding */
    --container-padding-mobile: 1rem;      /* 16px */
    --container-padding-tablet: 1.5rem;    /* 24px */
    --container-padding-desktop: 2rem;     /* 32px */
    
    /* Section Padding */
    --section-padding-mobile: 2rem 0;      /* 32px vertical */
    --section-padding-tablet: 3rem 0;      /* 48px vertical */
    --section-padding-desktop: 4rem 0;     /* 64px vertical */
}

/* ==============================================
   TYPOGRAPHY AND BASE STYLES
   ============================================== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--light-text);
    background-color: var(--dark-bg);
}

/* Container base styles */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

/* Main content wrapper */
.main-content {
    margin-top: 80px;
    min-height: calc(100vh - 80px);
}

/* ==============================================
   TYPOGRAPHY HIERARCHY
   ============================================== */

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--kloud-white);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: 3rem;
    font-weight: 700;
}

h2 {
    font-size: 2.5rem;
    font-weight: 600;
}

h3 {
    font-size: 2rem;
    font-weight: 600;
}

h4 {
    font-size: 1.5rem;
    font-weight: 600;
}

h5 {
    font-size: 1.25rem;
    font-weight: 600;
}

h6 {
    font-size: 1.125rem;
    font-weight: 600;
}

/* Paragraphs and text */
p {
    margin-bottom: var(--spacing-md);
    color: var(--light-text);
}

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

a:hover {
    color: var(--kloud-white);
}

/* Lists */
ul, ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

li {
    margin-bottom: var(--spacing-xs);
    color: var(--light-text);
}

/* Code and preformatted text */
code {
    background: var(--gray-100);
    color: var(--kloud-cyan);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.9em;
}

pre {
    background: var(--card-bg);
    color: var(--light-text);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
}

/* ==============================================
   UTILITY CLASSES FOR TYPOGRAPHY
   ============================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--kloud-cyan); }
.text-secondary { color: var(--medium-text); }
.text-light { color: var(--light-text); }
.text-white { color: var(--kloud-white); }

.font-weight-light { font-weight: 300; }
.font-weight-normal { font-weight: 400; }
.font-weight-medium { font-weight: 500; }
.font-weight-semibold { font-weight: 600; }
.font-weight-bold { font-weight: 700; }

.font-size-sm { font-size: 0.875rem; }
.font-size-base { font-size: 1rem; }
.font-size-lg { font-size: 1.125rem; }
.font-size-xl { font-size: 1.25rem; }
.font-size-2xl { font-size: 1.5rem; }

/* ==============================================
   SPACING UTILITY CLASSES
   ============================================== */
/* Margin utilities */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

/* Padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-md); }
.p-3 { padding: var(--spacing-lg); }
.p-4 { padding: var(--spacing-xl); }

/* ==============================================
   COMMON SECTION STYLES
   ============================================== */
.section-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--kloud-cyan);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--kloud-white);
    margin-bottom: 1rem;
    text-align: center;
}

.page-subtitle {
    font-size: 1.2rem;
    color: var(--medium-text);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

/* ==============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================== */

/* Focus styles for keyboard navigation */
*:focus {
    outline: 2px solid var(--kloud-cyan);
    outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}