/* TSWSA Infrastructure Web - Theme Configuration */
/* Import theme foundation and components */
@import url('./foundation.css');
@import url('./components.css');

/* Import existing variables for backward compatibility */
@import './variables.css';
@import './layout-fix.css';
@import './backdrop-theme.css';

/* Dark Purple-Blue-Orange Base Theme - Enhanced */
:root {
    /* Color Palette - Professional Admin Theme */
    --primary-purple: #4B5563;        /* Professional gray */
    --primary-blue: #374151;          /* Dark gray */
    --primary-orange: #6B7280;        /* Medium gray */
    --accent-purple: #6B7280;         /* Lighter gray accent */
    --accent-blue: #9CA3AF;           /* Light gray accent */
    --accent-orange: #D1D5DB;         /* Very light gray accent */
    
    /* Professional Background Colors */
    --bg-primary: #1a1a2e;            /* Very dark blue-gray */
    --bg-secondary: #16213e;          /* Dark blue-gray */
    --bg-tertiary: #0f3460;           /* Medium dark blue */
    --bg-surface: #1e293b;            /* Surface gray */
    --bg-elevated: #334155;           /* Elevated surface */
    
    /* Text Colors - Softer, less harsh */
    --text-primary: #E2E8F0;          /* Soft off-white */
    --text-secondary: #A8B8D0;        /* Soft light gray */
    --text-muted: #94A3B8;            /* Medium gray */
    --text-disabled: #64748B;         /* Dark gray */
    
    /* Border Colors */
    --border-primary: rgba(107, 114, 128, 0.3);    /* Gray border */
    --border-secondary: rgba(75, 85, 99, 0.2);     /* Dark gray border */
    --border-muted: rgba(255, 255, 255, 0.1);      /* Subtle border */
    
    /* Status Colors */
    --success: #10B981;               /* Green */
    --warning: #F59E0B;               /* Amber */
    --error: #EF4444;                 /* Red */
    --info: #3B82F6;                  /* Blue */
    
    /* Spacing System - Mobile First Approach */
    --space-xs: 0.25rem;              /* 4px */
    --space-sm: 0.5rem;               /* 8px */
    --space-md: 1rem;                 /* 16px */
    --space-lg: 1.5rem;               /* 24px */
    --space-xl: 2rem;                 /* 32px */
    --space-2xl: 3rem;                /* 48px */
    --space-3xl: 4rem;                /* 64px */
    --space-4xl: 6rem;                /* 96px */
    
    /* Component Spacing */
    --component-padding: var(--space-md);
    --component-margin: var(--space-lg);
    --section-spacing: var(--space-2xl);
    --card-padding: var(--space-lg);
    --button-padding: var(--space-sm) var(--space-md);
    
    /* Typography - Font Baseline */
    /* --base-font-size: 16px; Base font size (increased from 14px baseline to 16px for better readability) */
    --base-font-size: 16px; /* Base font size - integer px value for better browser rendering */
    --tswsa-font-size-base: var(--base-font-size); /* Alias for consistency */
    
    /* Typography Spacing */
    --text-line-height: 1.6;
    --heading-line-height: 1.3;
    --paragraph-margin: var(--space-md);
    --heading-margin: var(--space-lg);
    
    /* Layout Spacing */
    --container-padding: var(--space-md);
    --grid-gap: var(--space-lg);
    --sidebar-padding: var(--space-lg);
    --topbar-padding: var(--space-md);
    
    /* Scaling Control - Base Multipliers */
    --base-spacing: 0.8rem; /* Reduced spacing multiplier */
    --base-padding: 0.75rem; /* Reduced padding multiplier */
    --base-margin: 0.6rem; /* Reduced margin multiplier */
    --base-border-radius: 8px; /* Slightly reduced border radius */
    
    /* Responsive Spacing - Tablet */
    --space-md-tablet: 1.25rem;       /* 20px */
    --space-lg-tablet: 2rem;          /* 32px */
    --space-xl-tablet: 2.5rem;        /* 40px */
    --space-2xl-tablet: 4rem;         /* 64px */
    
    /* Responsive Spacing - Desktop */
    --space-md-desktop: 1.5rem;       /* 24px */
    --space-lg-desktop: 2.5rem;       /* 40px */
    --space-xl-desktop: 3rem;         /* 48px */
    --space-2xl-desktop: 5rem;        /* 80px */
    --space-3xl-desktop: 6rem;        /* 96px */
}

/* Base Theme Styles */
html, body {
    font-size: var(--tswsa-font-size-base, var(--base-font-size, 16px)); /* Apply base font size */
}

body {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
    color: var(--text-primary);
    font-family: var(--tswsa-font-family, 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    line-height: var(--text-line-height);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    line-height: var(--heading-line-height);
    margin-bottom: var(--heading-margin);
    font-weight: 600;
    font-family: var(--tswsa-font-family-heading, 'Orbitron', 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* Article/Content Typography */
article, .content, main article, .article-content, p {
    font-family: var(--tswsa-font-family-article, 'Crimson Pro', 'Lora', Georgia, 'Times New Roman', Times, serif);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }

p {
    margin-bottom: var(--paragraph-margin);
    color: var(--text-secondary);
}

/* Links */
a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-blue);
}

/* Buttons */
.btn {
    padding: var(--button-padding);
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
    color: var(--text-primary);
    border-color: var(--primary-purple);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.btn-secondary:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-purple);
}

.btn-accent {
    background: var(--primary-orange);
    color: var(--text-primary);
    border-color: var(--primary-orange);
}

.btn-accent:hover {
    background: var(--accent-orange);
    transform: translateY(-1px);
}

/* Cards */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-muted);
    border-radius: 0.75rem;
    padding: var(--card-padding);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Form Elements */
.form-control {
    background: var(--bg-secondary);
    border: 1px solid var(--border-muted);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: 0.5rem;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    border-color: var(--primary-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Responsive Spacing */
@media (min-width: 768px) {
    :root {
        --space-md: var(--space-md-tablet);
        --space-lg: var(--space-lg-tablet);
        --space-xl: var(--space-xl-tablet);
        --space-2xl: var(--space-2xl-tablet);
    }
    
    .container {
        padding: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    :root {
        --space-md: var(--space-md-desktop);
        --space-lg: var(--space-lg-desktop);
        --space-xl: var(--space-xl-desktop);
        --space-2xl: var(--space-2xl-desktop);
        --space-3xl: var(--space-3xl-desktop);
    }
    
    .container {
        padding: var(--space-xl);
    }
}

/* Theme styles */