/* ==========================================================================
   Materia M3 — Elevation
   M3 has 6 elevation levels (0-5). Each combines a key shadow + ambient
   shadow. M3 also tints surfaces with `surface-tint` colour overlays.
   ========================================================================== */

:root {
    --md-sys-elevation-0:
        0px 0px 0px 0px rgba(0,0,0,0.0),
        0px 0px 0px 0px rgba(0,0,0,0.0);

    --md-sys-elevation-1:
        0px 1px 2px 0px rgba(0,0,0,0.30),
        0px 1px 3px 1px rgba(0,0,0,0.15);

    --md-sys-elevation-2:
        0px 1px 2px 0px rgba(0,0,0,0.30),
        0px 2px 6px 2px rgba(0,0,0,0.15);

    --md-sys-elevation-3:
        0px 1px 3px 0px rgba(0,0,0,0.30),
        0px 4px 8px 3px rgba(0,0,0,0.15);

    --md-sys-elevation-4:
        0px 2px 3px 0px rgba(0,0,0,0.30),
        0px 6px 10px 4px rgba(0,0,0,0.15);

    --md-sys-elevation-5:
        0px 4px 4px 0px rgba(0,0,0,0.30),
        0px 8px 12px 6px rgba(0,0,0,0.15);

    /* Tint overlay alpha values applied on top of surface (M3 tonal elevation) */
    --md-sys-elevation-tint-1: 0.05;
    --md-sys-elevation-tint-2: 0.08;
    --md-sys-elevation-tint-3: 0.11;
    --md-sys-elevation-tint-4: 0.12;
    --md-sys-elevation-tint-5: 0.14;
}

/* ====== Reusable elevation helpers ====== */
.m3-elevation-0 { box-shadow: var(--md-sys-elevation-0); }
.m3-elevation-1 { box-shadow: var(--md-sys-elevation-1); }
.m3-elevation-2 { box-shadow: var(--md-sys-elevation-2); }
.m3-elevation-3 { box-shadow: var(--md-sys-elevation-3); }
.m3-elevation-4 { box-shadow: var(--md-sys-elevation-4); }
.m3-elevation-5 { box-shadow: var(--md-sys-elevation-5); }

/* Surface elevation (combines tinted surface + shadow), the M3 way.
   Use these helpers on raised surfaces — they compose colour and shadow. */
.m3-surface,
.m3-surface-1,
.m3-surface-2,
.m3-surface-3,
.m3-surface-4,
.m3-surface-5 {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    position: relative;
    isolation: isolate;
    transition:
        box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
        background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.m3-surface-1 {
    background-color: var(--md-sys-color-surface-container-low);
    box-shadow: var(--md-sys-elevation-1);
}
.m3-surface-2 {
    background-color: var(--md-sys-color-surface-container);
    box-shadow: var(--md-sys-elevation-2);
}
.m3-surface-3 {
    background-color: var(--md-sys-color-surface-container-high);
    box-shadow: var(--md-sys-elevation-3);
}
.m3-surface-4 {
    background-color: var(--md-sys-color-surface-container-high);
    box-shadow: var(--md-sys-elevation-4);
}
.m3-surface-5 {
    background-color: var(--md-sys-color-surface-container-highest);
    box-shadow: var(--md-sys-elevation-5);
}