/* ============================================
   NEW_STYLE.CSS - SEVA HYBRID STYLE
   90% Material Design 3 Expressive + 10% Apple Liquid Glass
============================================ */

:root {
    /* Brand Colors (Referenced from style.css) */
    --primary: #AD0000;
    --primary-dark: #8A0000;
    --primary-light: #FFE9EB;
    --primary-container: #FFDAD8;
    --on-primary-container: #410002;
    
    /* MD3 Neutral & Dynamic Tokens */
    --surface-tint: #AD0000;
    --surface: #FFF8F7;
    --surface-container-lowest: #FFFFFF;
    --surface-container-low: #FDF1F0;
    --surface-container: #F8EBEA;
    --surface-container-high: #F2E5E4;
    --surface-container-highest: #ECE0DF;
    
    --on-surface: #231919;
    --on-surface-variant: #534343;
    --outline: #857372;
    --outline-variant: #D8C2C1;

    /* Apple Liquid Glass Tokens (10%) */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-bg-dark: rgba(35, 25, 25, 0.75);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-blur: blur(16px) saturate(180%);
    --glass-shadow: 0 8px 32px 0 rgba(173, 0, 0, 0.08);

    /* MD3 Shape Scale */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 28px;
    --radius-full: 9999px;
    
    /* Elevation Shadows */
    --elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
    --elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
    --elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
}

/* Material 3 Expressive Reset & Typography Override */
body {
    background-color: var(--surface);
    color: var(--on-surface);
}

/* Apple Liquid Glass Floating Header */
.navbar {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* Material Expressive Cards */
.m3-card {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    border: 1px solid var(--outline-variant);
    transition: all 300ms cubic-bezier(0.2, 0, 0, 1);
    position: relative;
    overflow: hidden;
}

.m3-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--elevation-2);
    border-color: var(--primary);
}

/* Glassmorphism Accents */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-xl);
}

/* MD3 Pill Buttons */
.btn-m3-primary {
    background-color: var(--primary);
    color: #FFFFFF;
    border-radius: var(--radius-full);
    padding: 0.875rem 1.75rem;
    font-weight: 600;
    transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
    box-shadow: var(--elevation-1);
}

.btn-m3-primary:hover {
    background-color: var(--primary-dark);
    box-shadow: var(--elevation-2);
    transform: scale(1.02);
}

.btn-m3-tonal {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
    border-radius: var(--radius-full);
    padding: 0.875rem 1.75rem;
    font-weight: 600;
}

.btn-m3-tonal:hover {
    filter: brightness(0.95);
    transform: scale(1.02);
}

/* Smooth Badges */
.m3-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-size: 0.8rem;
    font-weight: 700;
}