/* css/variables.css */

:root {
    /* Premium Editorial Light Theme (Default) */
    --bg-main: #fafafa; /* Museum light off-white background */
    --bg-card: rgba(255, 255, 255, 0.85);
    --border-glass: rgba(0, 0, 0, 0.08);
    --text-primary: #1c1d1f; /* Elegant near black */
    --text-secondary: #444444; /* Charcoal grey (darker for WCAG contrast compliance) */
    
    /* Editorial brand accents */
    --accent: #1c1d1f; 
    --accent-hover: #0a0a0a;
    --accent-warm: #a67c52; /* Bronze matérico editorial */
    --accent-glow: rgba(166, 124, 82, 0.08);

    /* Spacing scale tokens */
    --space-2xs: 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-2xl: 3rem;    /* 48px */

    /* Typography from Numen */
    --font-display: "Bebas Neue", sans-serif;
    --font-serif: "EB Garamond", serif;
    --font-sans: "Poppins", system-ui, -apple-system, sans-serif;

    /* Motion Tokens (Emil Kowalski & Apple Design Craft Standards) */
    --ease-out-editorial: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out-editorial: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-spring-subtle: cubic-bezier(0.32, 0.72, 0, 1);

    --duration-fast: 140ms;
    --duration-ui: 240ms;
    --duration-view: 380ms;

    /* Transition defaults (explicit GPU properties, avoiding unbounded 'all') */
    --transition-smooth: opacity var(--duration-view) var(--ease-out-editorial), transform var(--duration-view) var(--ease-out-editorial);
    --transition-fast: transform var(--duration-fast) var(--ease-out-editorial), opacity var(--duration-fast) var(--ease-out-editorial), border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;

    /* Shadow tokens */
    --shadow-premium: 0 15px 35px rgba(0, 0, 0, 0.05);
    --shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.8);
    --blur-glass: 12px;

    /* Dynamic overlay gradients (kept for general uses) */
    --card-gradient: linear-gradient(to right, #fafafa 0%, rgba(250, 250, 250, 0.7) 55%, rgba(250, 250, 250, 0) 100%);
    --card-gradient-hover: linear-gradient(to right, #fafafa 0%, rgba(250, 250, 250, 0.6) 55%, rgba(250, 250, 250, 0) 100%);
    /* Scrollbar variables for standard/custom scrollbars */
    --scrollbar-thumb: var(--border-glass);
    --scrollbar-thumb-hover: var(--text-secondary);
}

/* Premium Dark Theme Override */
html.dark-theme, body.dark-theme {
    --bg-main: #0e0e10; /* Deep gallery black (warmer dark tone) */
    --bg-card: rgba(22, 22, 26, 0.92);
    --border-glass: rgba(255, 255, 255, 0.14);
    --text-primary: #f4f5f8; /* Crisp soft off-white for maximum legibility */
    --text-secondary: #b8bac6; /* Bright soft slate gray (high WCAG contrast) */
    
    --accent: #c8a96e; /* Dorado editorial */
    --accent-hover: #dbbf88;
    --accent-warm: #c8a96e;
    --accent-glow: rgba(200, 169, 110, 0.12);
    
    --shadow-premium: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 40px rgba(200, 169, 110, 0.03);
    --shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.05);
    --blur-glass: 16px;

    --card-gradient: linear-gradient(to right, #0e0e10 0%, rgba(14, 14, 16, 0.75) 55%, rgba(14, 14, 16, 0) 100%);
    --card-gradient-hover: linear-gradient(to right, #0e0e10 0%, rgba(14, 14, 16, 0.65) 55%, rgba(14, 14, 16, 0) 100%);

    /* Custom premium scrollbar in dark mode */
    --scrollbar-thumb: rgba(200, 169, 110, 0.2);
    --scrollbar-thumb-hover: rgba(200, 169, 110, 0.45);
}

/* Wide-Gamut Display-P3 Enhancement for High-End Screens */
@supports (color: color(display-p3 1 1 1)) {
    :root {
        --accent-warm: color(display-p3 0.63 0.48 0.33);
        --accent-glow: color(display-p3 0.63 0.48 0.33 / 0.08);
    }
    html.dark-theme, body.dark-theme {
        --accent: color(display-p3 0.77 0.65 0.44);
        --accent-hover: color(display-p3 0.84 0.73 0.54);
        --accent-warm: color(display-p3 0.77 0.65 0.44);
        --accent-glow: color(display-p3 0.77 0.65 0.44 / 0.12);
        --scrollbar-thumb: color(display-p3 0.77 0.65 0.44 / 0.2);
        --scrollbar-thumb-hover: color(display-p3 0.77 0.65 0.44 / 0.45);
    }
}