/*
Theme Name: HVCO Theme
Author: Modathir Khider
Description: High-transparency humanitarian theme for HVCO.
Version: 1.0
Text Domain: hvco
*/

:root {
    /* Light Theme */
    --background: #fff8f7;
    --surface: #ffffff;
    --surface-container: #f5eceb;
    --surface-container-low: #fbf1f1;
    --surface-container-lowest: #ffffff;
    --primary: #ad0e1b;
    --on-primary: #ffffff;
    --secondary: #9c4406;
    --on-secondary: #ffffff;
    --on-surface: #1f1b1b;
    --on-surface-variant: #5b403e;
    --outline: #8f6f6c;
    --outline-variant: #e4beba;
    --secondary-container: #fd8e4f;
    --on-secondary-container: #6d2c00;
    --primary-container: #d12e30;
    --on-primary-container: #ffefed;
    --tertiary: #5a5554;
    --on-tertiary: #ffffff;

    /* Legacy variables from prompt.md */
    --tomato-jam: #AD0E1B;
    --tomato-jam-8: rgba(173, 14, 27, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.3);
    --grid-unit: 8px;
}

[data-theme="dark"] {
    /* Dark Theme */
    --background: #1e100e;
    --surface: #1e100e;
    --surface-container: #2c1c1a;
    --surface-container-low: #271816;
    --surface-container-lowest: #180a09;
    --primary: #ffb3ad;
    --on-primary: #680009;
    --secondary: #ffb3ad;
    --on-secondary: #611112;
    --on-surface: #f9dcd9;
    --on-surface-variant: #e4beba;
    --outline: #ab8985;
    --outline-variant: #5b403e;
    --secondary-container: #802825;
    --on-secondary-container: #ff9991;
    --primary-container: #d12e30;
    --on-primary-container: #ffefed;
    --tertiary: #7cd1f5;
    --on-tertiary: #003545;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background);
    color: var(--on-surface);
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, .font-headline {
    font-family: 'Sora', sans-serif;
}

[dir="rtl"] body {
    font-family: 'Cairo', sans-serif;
}

.surface-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--outline-variant);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .surface-glass {
    background: rgba(44, 28, 26, 0.4);
    border: 1px solid rgba(171, 137, 133, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.hero-pattern {
    background-image: radial-gradient(var(--outline-variant) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* Glass Card from prompt.md */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px var(--tomato-jam-8);
    border-radius: 16px;
}

@media (max-width: 768px) {
    .max-w-container-max {
        padding-inline: 16px;
    }
}