/* css/global.css */

/* Base styles, resets, typography, buttons, forms, general cards, and global variables */

/* --- LIGHT THEME (DEFAULT) & STRUCTURE --- */
:root {
    --font-primary: 'Outfit', 'Inter', -apple-system, BlinkMacMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-secondary: 'Inter', sans-serif; /* For body text if Outfit is too stylized */

    /* New Color Palette - Light Theme */
    --bg-main: #fcfcfc; /* Very light, almost white background */
    --bg-card: #ffffff; /* Pure white for cards */
    --bg-header: rgba(255, 255, 255, 0.95); /* More opaque header */
    --bg-highlight: #f0f4f8; /* Soft light gray for highlights */
    
    --text-primary: #1a202c; /* Dark charcoal for main text */
    --text-secondary: #4a5568; /* Muted gray for secondary text */
    --text-light: #ffffff; /* White for text on dark backgrounds */
    
    --accent-color: #4c51bf; /* Deep Indigo for primary actions/highlights */
    --border-color: #e2e8f0; /* Light gray for borders */
    
    --shadow-soft: rgba(0, 0, 0, 0.04);
    --shadow-medium: rgba(0, 0, 0, 0.08);

    --btn-primary-bg: var(--accent-color);
    --btn-primary-hover: #3d429a; /* Darker indigo on hover */
    --btn-primary-text: #ffffff;

    --btn-secondary-bg: #cbd5e0; /* Soft gray for secondary buttons */
    --btn-secondary-hover: #a0aec0; /* Darker gray on hover */
    --btn-secondary-text: #2d3748; /* Dark text for secondary buttons */
    
    --btn-outlined-text: var(--accent-color);
    --btn-outlined-border: var(--accent-color);
    --btn-outlined-hover-bg: rgba(76, 81, 191, 0.08); /* Light indigo tint */

    --btn-text-bg: transparent;
    --btn-text-hover: rgba(0,0,0,0.03); /* Very subtle hover for text buttons */
    --btn-text-color: var(--text-primary);

    /* Grid SVG data (can be moved to components.css if only used there) */
    --grid-svg-gray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' width='28' height='28' fill='none' stroke='%23e2e8f0'%3e%3cpath d='M0 .5H28M.5 0V28'/%3e%3c/svg%3e");
    --border-grid-gray-light: #cdd6e4; 
    --grid-svg-blue: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' width='28' height='28' fill='none' stroke='%23a7bcf1'%3e%3cpath d='M0 .5H28M.5 0V28'/%3e%3c/svg%3e");
    --grid-svg-yellow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' width='28' height='28' fill='none' stroke='%23f9e6b4'%3e%3cpath d='M0 .5H28M.5 0V28'/%3e%3c/svg%3e");
    --grid-svg-green: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' width='28' height='28' fill='none' stroke='%23b2f5ea'%3e%3cpath d='M0 .5H28M.5 0V28'/%3e%3c/svg%3e");


    /* Font Sizes */
    --fs-xs: 0.75rem;  /* 12px */
    --fs-sm: 0.875rem; /* 14px */
    --fs-base: 1rem;   /* 16px */
    --fs-md: 1.125rem; /* 18px */
    --fs-lg: 1.25rem;  /* 20px */
    --fs-xl: 1.5rem;   /* 24px */
    --fs-2xl: 1.875rem;/* 30px */
    --fs-3xl: 2.25rem; /* 36px */
    --fs-4xl: 3rem;    /* 48px */

    /* Spacing */
    --space-xxs: 0.25rem; /* 4px */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 0.75rem;  /* 12px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    --space-xxl: 3rem;    /* 48px */
    --space-xxxl: 4rem;   /* 64px */
}

/* --- DARK THEME --- */
html[data-theme="dark"] {
    /* New Color Palette - Dark Theme */
    --bg-main: #1a202c; /* Dark charcoal background */
    --bg-card: #2d3748; /* Slightly lighter dark for cards */
    --bg-header: rgba(45, 55, 72, 0.95); /* Opaque header for dark */
    --bg-highlight: #4a5568; /* Muted gray for highlights */
    
    --text-primary: #edf2f7; /* Very light gray for main text */
    --text-secondary: #a0aec0; /* Lighter muted gray for secondary */
    --text-light: #ffffff; /* White (same as light theme) */
    
    --accent-color: #818cf8; /* Lighter, vibrant indigo for dark mode accent */
    --border-color: #424e61; /* Darker gray for borders */
    
    --shadow-soft: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.2);

    --btn-primary-bg: var(--accent-color);
    --btn-primary-hover: #9fa6ff; /* Lighter indigo on hover */
    --btn-primary-text: #1a202c; /* Dark text on light button */

    --btn-secondary-bg: #4a5568; /* Dark muted gray for secondary buttons */
    --btn-secondary-hover: #606f8c; /* Lighter dark gray on hover */
    --btn-secondary-text: #edf2f7; /* Light text for secondary buttons */
    
    --btn-outlined-text: var(--accent-color);
    --btn-outlined-border: var(--accent-color);
    --btn-outlined-hover-bg: rgba(129, 140, 248, 0.1); /* Light indigo tint */
    --btn-text-hover: rgba(255,255,255,0.06);

    /* Dark mode grid SVGs */
    --grid-svg-gray: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' width='28' height='28' fill='none' stroke='%23424e61'%3e%3cpath d='M0 .5H28M.5 0V28'/%3e%3c/svg%3e");
    --border-grid-gray-dark: #626e82;
    --grid-svg-blue: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' width='28' height='28' fill='none' stroke='%23667eea'%3e%3cpath d='M0 .5H28M.5 0V28'/%3e%3c/svg%3e");
    --grid-svg-yellow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' width='28' height='28' fill='none' stroke='%23ecc94b'%3e%3cpath d='M0 .5H28M.5 0V28'/%3e%3c/svg%3e");
    --grid-svg-green: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' width='28' height='28' fill='none' stroke='%2338b2ac'%3e%3cpath d='M0 .5H28M.5 0V28'/%3e%3c/svg%3e");
}

/* Global Reset and Base Styles (No changes here, assuming they are correct) */
*, *::before, *::after {
    box-sizing: border-box;
}
body { 
    font-family: var(--font-primary);
    background-color: var(--bg-main); 
    color: var(--text-primary); 
    margin: 0; 
    font-size: var(--fs-base);
    line-height: 1.65; 
    transition: background-color 0.2s, color 0.2s; 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
main {
    flex-grow: 1;
    width: 100%; 
}
.container { 
    max-width: 1280px; 
    margin: 0 auto; 
    padding: 0 var(--space-lg); 
}
h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: normal; }

h1, .h1 { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.2; margin-bottom: var(--space-lg); }
h2, .h2 { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.25; margin-bottom: var(--space-md); }
h3, .h3 { font-size: var(--fs-xl); font-weight: 600; line-height: 1.3; margin-bottom: var(--space-sm); }
h4, .h4 { font-size: var(--fs-lg); font-weight: 500; line-height: 1.35; margin-bottom: var(--space-sm); }
p { margin-bottom: var(--space-md); line-height: 1.7; }
p:last-child { margin-bottom: 0; }
small, .text-small { font-size: var(--fs-sm); }
.text-muted { color: var(--text-secondary); }

a { color: var(--accent-color); text-decoration: none; transition: color 0.2s ease; }
a:hover { text-decoration: none; filter: brightness(0.85); } 
html[data-theme="dark"] a:hover { filter: brightness(1.15); }

/* Buttons (No changes here, as they use global variables) */
.btn { 
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    gap: var(--space-xs); 
    padding: var(--space-sm) var(--space-md); 
    font-size: var(--fs-sm); 
    border: 1px solid transparent; 
    border-radius: 8px; 
    font-weight: 500; 
    cursor: pointer; 
    transition: background-color .2s, border-color .2s, color .2s, transform 0.1s ease-out, box-shadow 0.15s ease-in-out; 
    text-align: center;
    line-height: 1.5;
    white-space: nowrap; 
}
.btn:focus-visible { 
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
.btn:hover {
    text-decoration: none;
}
.btn:active {
    transform: translateY(1px) scale(0.98); 
}
.btn i { 
    font-size: 1.2em; 
    line-height: 1;
}

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

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

.btn-outlined {
    background-color: transparent;
    color: var(--btn-outlined-text);
    border-color: var(--btn-outlined-border);
}
.btn-outlined:hover {
    background-color: var(--btn-outlined-hover-bg);
    color: var(--btn-outlined-text); 
}
.btn-outlined.active { 
    background-color: var(--accent-color);
    color: var(--btn-primary-text);
    border-color: var(--accent-color);
}

.btn-text {
    background-color: var(--btn-text-bg);
    color: var(--btn-text-color);
    padding-left: var(--space-xs); 
    padding-right: var(--space-xs);
    border-color: transparent;
}
.btn-text:hover {
    background-color: var(--btn-text-hover);
    color: var(--accent-color); 
}

/* General Card Styling (No changes here, as they use global variables) */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px; 
    padding: var(--space-xl); 
    box-shadow: 0 4px 8px var(--shadow-soft); 
    margin-bottom: var(--space-xl); 
}
.card:last-child {
    margin-bottom: 0;
}

/* Form Elements Base Styles (No changes here, as they use global variables) */
.form-group {
    margin-bottom: var(--space-lg);
}
.form-label, .form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-sm);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem; 
    font-size: var(--fs-base);
    font-family: inherit;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-main); 
    background-clip: padding-box;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control:focus {
    color: var(--text-primary);
    background-color: var(--bg-card); 
    border-color: var(--accent-color);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); 
}
html[data-theme="dark"] .form-control {
    background-color: #262626; 
    border-color: #444;
}
html[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-card); 
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem rgba(88,166,255,.25);
}
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M8 11L3 6h10L8 11z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.8em;
    padding-right: 2.5rem; 
}
html[data-theme="dark"] select.form-control {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239aa0a6'%3E%3Cpath d='M8 11L3 6h10L8 11z'/%3E%3C/svg%3E");
}
.form-text {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
    display: block;
    line-height: 1.4;
}

/* Responsive base container padding (No changes here) */
@media (max-width: 768px) {
    .container { padding: 0 var(--space-md); }
    h1, .h1 { font-size: var(--fs-2xl); }
    h2, .h2 { font-size: var(--fs-xl); }
    h3, .h3 { font-size: var(--fs-lg); }
    .card { padding: var(--space-lg); }
}
@media (max-width: 480px) {
    body { font-size: calc(var(--fs-base) * 0.92); } 
    .container { padding: 0 var(--space-md); } 
    .btn { padding: var(--space-sm) var(--space-md); font-size: var(--fs-sm); }
    .form-control { padding: var(--space-sm) var(--space-md); font-size: var(--fs-sm); }
    h1, .h1 { font-size: var(--fs-xl); }
    h2, .h2 { font-size: var(--fs-lg); }
    .card { padding: var(--space-md); }
}