/**
 * Product Showcase - Theming System
 * 
 * I went with the CUBE CSS approach, which uses the following:
 * - Composition: Layout patterns (.flow, .grid, .cluster)
 * - Utilities: Single-purpose classes (.text-center, .font-bold)
 * - Blocks: Component styles (.card, .button)
 * - Exceptions: State variations (add additional classes as needed)
 *
 * REQUIREMENTS:
 * 1. Define theme system with custom properties
 * 2. Implement light and dark themes
 * 3. Support prefers-color-scheme
 * 4. Use color-mix() for color variations
 * 5. Create responsive layout
 * 6. Ensure accessibility (contrast, focus indicators, reduced motion)
 * 7. Style all components and states
 */

/* Your CSS implementation goes here */

/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap');

/* Reset styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--type-body);
}

/* Root declaration */
:root {
    /* COLOR DECLARATIONS */
    /* Theme colors */
    --color-primary: #a52e89;

    /* Light theme */
    --color-secondary: color-mix(in oklch, var(--color-primary) 60%, white);
    --color-background: #FFFFFF;
    --color-text: #000000;
    --color-header: color-mix(in oklch, var(--color-primary) 20%, white);

    /* Font scale variations */
    --font-xs: calc(var(--font-m) * 0.65);
    --font-s: calc(var(--font-m) * 0.85);
    --font-m: clamp(1rem, 3vw, 1.2rem);
    --font-l: calc(var(--font-m) * 1.35);
    --font-xl: calc(var(--font-m) * 2);

    /* Font style selections */
    --type-title: "Zalando Sans Expanded", 'Rubik', sans-serif;
    --type-body: "Rubik", sans-serif;

    /* Line height rhythm & variations */
    --rhythm: 1.4rem;
    --space-xxs: calc(var(--rhythm) * 0.25);
    --space-xs: calc(var(--rhythm) * 0.5);
    --space-s: calc(var(--rhythm) * 0.75);
    --space-m: var(--rhythm);
    --space-l: calc(var(--rhythm) * 1.5);
    --space-xl: calc(var(--rhythm) * 2);
}

.dark-theme {
    /* DARK THEME DECLARATION */ 
    --color-primary: #ea7bd0;
    --color-secondary: color-mix(in oklch, var(--color-primary) 80%, black);   
    --color-background: #1D1E2C;
    --color-text: #FFFFFF;
    --color-header: color-mix(in oklch, var(--color-primary) 30%, black);
}

@media (prefers-color-scheme: dark) {
    /* Should this be the default, use it instead and hide theme button */
    :root {
        --color-primary: #ea7bd0;
        --color-secondary: color-mix(in oklch, var(--color-primary) 80%, black);
        --color-background: #1D1E2C;
        --color-text: #FFFFFF;
        --color-header: color-mix(in oklch, var(--color-primary) 30%, black);
    }

    .theme-toggle {
        display: none;
    }
}


/* ---------------
COMPOSITION STYLES
---------------- */

.product-grid {
    padding: var(--space-m);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: var(--space-l);
    justify-content: center;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
}

.hero {
    padding: clamp(var(--space-xl), calc(var(--space-xl) * 1.2), calc(var(--space-xl) * 1.5));
    text-align: center;
    color: white;
    background: linear-gradient(50deg, var(--color-primary), var(--color-secondary));

    .hero-title {
        font-size: var(--font-xl);
        margin-bottom: var(--space-xs);
        font-family: var(--type-title);
    }
}

.filters {
    text-align: center;
    padding-top: var(--space-s);
}

.filter-buttons {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    display: flex;
    justify-content: center;
    gap: var(--space-s);
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    color: var(--color-text);
    font-size: var(--font-m);

    img {
        border-radius: var(--space-m);
    }

    .product-content {
        
        h3 {
            font-size: var(--font-l);
            font-family: var(--type-title);
        }

        .product-footer {

            display: flex;
            flex-direction: row;
            align-items: center;
            padding-top: var(--space-xxs);
            gap: var(--space-xxs);

            .product-price {
                font-size:var(--font-l);
            }

            .product-button {
                padding: var(--space-xxs);
                border-radius: 0.5rem;
                border: 1px solid var(--color-primary);
                background-color: transparent;
                color: var(--color-text);
                font-size: var(--font-s);
            }
        }
    }
}

/* ---------------
BLOCK STYLES
---------------- */

.site-header {
    background-color: var(--color-header);
    color: var(--color-primary);
    padding: clamp(var(--space-s), var(--space-m), var(--space-l));
}

.theme-toggle { /* Theme toggle button */
    padding: var(--space-xs) var(--space-xs);
    border-radius: 0.5rem;
    border: 3px solid var(--color-primary);
    background-color: transparent;
    color: var(--color-text);
    font-size: var(--font-s);
}

main {
    background-color: var(--color-background);
}

.filter-button {
    padding: var(--space-xs) var(--space-xs);
    border-radius: 0.5rem;
    border: 1px solid var(--color-primary);
    background-color: transparent;
    color: var(--color-text);
    font-size: var(--font-s);
}

.site-footer {
    background-color: var(--color-header);
    color: var(--color-primary);
    padding: clamp(var(--space-s), var(--space-m), var(--space-l));
}

/* ---------------
UTILITY STYLES
---------------- */

.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
}

/* ---------------
EXCEPTION STYLES
---------------- */

button:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

button:active {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

button:hover {
    background-color: color-mix(in oklch, currentColor 15%, transparent);    
}