/* assets/css/variables.css */

:root {
    /* MD3 Colors - Mock Palette (Dark/Light setup) */
    --md-sys-color-primary: #D0BCFF;
    --md-sys-color-on-primary: #381E72;
    --md-sys-color-primary-container: #4F378B;
    --md-sys-color-on-primary-container: #EADDFF;
    
    --md-sys-color-secondary: #CCC2DC;
    --md-sys-color-on-secondary: #332D41;
    --md-sys-color-secondary-container: #4A4458;
    --md-sys-color-on-secondary-container: #E8DEF8;
    
    --md-sys-color-tertiary: #EFB8C8;
    --md-sys-color-on-tertiary: #492532;
    --md-sys-color-tertiary-container: #633B48;
    --md-sys-color-on-tertiary-container: #FFD8E4;
    
    --md-sys-color-error: #F2B8B5;
    --md-sys-color-on-error: #601410;
    
    --md-sys-color-background: #1C1B1F;
    --md-sys-color-on-background: #E6E1E5;
    
    --md-sys-color-surface: #1C1B1F;
    --md-sys-color-on-surface: #E6E1E5;
    
    --md-sys-color-outline: #938F99;
    --md-sys-color-outline-variant: #49454F;

    /* Typography */
    --md-sys-typescale-display-large: 400 57px/64px 'Roboto', sans-serif;
    --md-sys-typescale-headline-large: 400 32px/40px 'Roboto', sans-serif;
    --md-sys-typescale-title-medium: 500 16px/24px 'Roboto', sans-serif;
    --md-sys-typescale-body-large: 400 16px/24px 'Roboto', sans-serif;
    --md-sys-typescale-label-large: 500 14px/20px 'Roboto', sans-serif;
    
    /* Elevation */
    --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
    --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
}

body {
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
}

/* Base Components */
.md-btn {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    padding: 10px 24px;
    border-radius: 20px;
    border: none;
    font: var(--md-sys-typescale-label-large);
    cursor: pointer;
    transition: background-image 0.2s;
}

.md-btn:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
}

.md-card {
    background-color: var(--md-sys-color-surface); /* Usually slightly lighter in dark mode */
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--md-sys-elevation-1);
    /* Surface Container Low mapping needed for better dark mode card distinction */
    background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
}