@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    font-family: 'Inter', sans-serif;
    color-scheme: light;

    /* === Custom Colors === */
    --color-primary: rgb(27, 18, 185);
    --color-primary-light: rgb(72, 63, 210);
    --color-primary-dark: rgb(18, 12, 120);

    --color-accent: rgb(255, 76, 41);
    --color-success: rgb(34, 197, 94);
    --color-warning: rgb(234, 179, 8);
    --color-error: rgb(239, 68, 68);

    --color-bg: #f9fafb;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-text: #111827;
    --color-text-secondary: #6b7280;

    /* === Map to Vaadin (Lumo) === */
    --lumo-primary-color: var(--color-primary);
    --lumo-primary-color-50pct: rgba(27, 18, 185, 0.5);
    --lumo-primary-color-10pct: rgba(27, 18, 185, 0.1);

    --lumo-base-color: var(--color-bg);
    --lumo-body-text-color: var(--color-text);
    --lumo-secondary-text-color: var(--color-text-secondary);
    --lumo-border-color: var(--color-border);

    --lumo-success-color: var(--color-success);
    --lumo-error-color: var(--color-error);
    --lumo-warning-color: var(--color-warning);

    --app-header-height: 64px;
}

/* === AppLayout === */
vaadin-app-layout::part(navbar) {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    height: var(--app-header-height);
}

vaadin-app-layout::part(drawer) {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
}

vaadin-app-layout::part(content) {
    background: var(--color-bg);
    padding: 1.5rem;
}

/* === Drawer Navigation === */
vaadin-tab {
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: 0.2s ease;
}

vaadin-tab[selected] {
    color: var(--color-primary);
    font-weight: 600;
}

/* === Buttons === */
vaadin-button {
    border-radius: 0.75rem;
    font-weight: 600;
}

vaadin-button[theme~="primary"] {
    background: var(--color-primary);
    color: white;
}

vaadin-button[theme~="primary"]:hover {
    background: var(--color-primary-light);
}

/* === Radio Buttons Fix === */
/* vaadin-radio-button {
    --lumo-primary-color: var(--color-primary);
}

vaadin-radio-button::part(label) {
    font-weight: 500;
    color: var(--color-text);
} */

/* === Cards / Surface === */
.card {
    background: var(--color-surface);
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    padding: 1.5rem;
}