/*
 * ====================================================================
 * CSS VARIABLES - Global Theme
 * ====================================================================
 * 
 * This file contains ONLY CSS variables that are available everywhere:
 * - Light DOM pages
 * - Shadow DOM components
 * 
 * CSS variables pierce the Shadow DOM boundary, so this single import
 * in index.html makes them available to all components.
 * 
 * For CSS classes (.container, .btn, etc.), see shared-classes.css
 * ====================================================================
 */

:root {
    --bg-color: #1a1a1a;
    --surface-color: #000000; /* For elements on top of the background */
    --text-color-primary: #ffffff;
    --text-color-secondary: #b0b0b0;
    --text-color-headings: #ffffff;
    --border-color: #333333;
    --accent-color: #6B4E71;
    --accent-color-hover: #5a3f5f;

    /* Feedback colors */
    --error-color: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.1);
    --success-color: #10b981;
    --success-bg: rgba(16, 185, 129, 0.1);
    --warning-color: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --info-color: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.1);

    /* Status colors - for achievements, milestones, voucher states */
    --success-light: rgba(40, 167, 69, 0.1);
    --success-border: rgba(40, 167, 69, 0.3);
    --success-dark: #155724;
    --success-main: #28a745;

    --warning-light: rgba(255, 193, 7, 0.1);
    --warning-border: rgba(255, 193, 7, 0.3);
    --warning-dark: #856404;

    /* Accent variations */
    --accent-color-secondary: #4a3350;

    /* Modal colors - used in vouchers-page.js */
    --modal-bg: #ffffff;
    --modal-text: #1a1a1a;
    --modal-secondary: #666666;
    --modal-overlay: rgba(0, 0, 0, 0.8);
    --modal-shadow: rgba(0, 0, 0, 0.3);
    --modal-button-border: #cccccc;
    --modal-button-hover-bg: #f5f5f5;
    --modal-button-hover-border: #999999;
    --modal-button-hover-text: #333333;

    /* Layout variables */
    --header-height: 72px; /* Fixed header height for consistent spacing */
    --header-height-mobile: 60px; /* Mobile header height */

    /* Shadow variables for dark theme */
    --shadow-color-umbra: rgba(255, 255, 255, 0.08);
    --shadow-color-penumbra: rgba(255, 255, 255, 0.05);
    --shadow-color-ambient: rgba(255, 255, 255, 0.04);

    /* Font families */
    --font-family-base: Helvetica, Arial, sans-serif;
    --font-family-heading: "Poppins", sans-serif;

    /* Standard box shadows using the variables */
    --shadow-sm: 0 1px 2px 0 var(--shadow-color-ambient);
    --shadow-md: 0 4px 6px -1px var(--shadow-color-penumbra), 0 2px 4px -2px var(--shadow-color-ambient);
    --shadow-lg: 0 10px 15px -3px var(--shadow-color-penumbra), 0 4px 6px -4px var(--shadow-color-ambient);
    --shadow-xl: 0 20px 25px -5px var(--shadow-color-penumbra), 0 8px 10px -6px var(--shadow-color-ambient);

    /* Action colors - like/dislike buttons */
    --color-like: #28a745;
    --color-like-hover: #218838;
    --color-dislike: #dc3545;
    --color-dislike-hover: #c82333;

    /* Streak gradient */
    --streak-gradient-start: #FF7A00;
    --streak-gradient-end: #E63F00;
}

/* Global body styles */
body {
    margin: 0;
    background-color: black;
    min-height: 100vh;
    font-family: var(--font-family-base);
    padding-top: var(--header-height);
    color: var(--text-color-primary);
    position: relative;
}

/* Media query for body padding on mobile */
@media (max-width: 768px) {
    body {
        padding-top: var(--header-height-mobile);
    }
}