/* ============================================================
   Elevation, Shape, Spacing Tokens - Material 3
   ============================================================ */

:root {
    /* Elevation - legacy soft shadows, still used where tonal elevation is not applied */
    --elev-0: none;
    --elev-1: 0 1px 2px rgba(15, 23, 42, 0.04);
    --elev-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --elev-3: 0 3px 6px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
    --elev-4: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --elev-6: 0 6px 12px rgba(15, 23, 42, 0.07), 0 3px 6px rgba(15, 23, 42, 0.05);
    --elev-8: 0 8px 16px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.04);
    --elev-12: 0 12px 24px rgba(15, 23, 42, 0.10), 0 6px 12px rgba(15, 23, 42, 0.06);
    --elev-16: 0 16px 32px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.08);
    --elev-24: 0 24px 48px rgba(15, 23, 42, 0.14), 0 12px 24px rgba(15, 23, 42, 0.10);

    /* M3 tonal elevation - sourya-blue surface tint blended over surface, plus a soft shadow.
       Use `background: var(--surface-elev-N); box-shadow: var(--tonal-shadow-N);` on elevated surfaces. */
    --surface-elev-0: var(--sourya-surface);
    --surface-elev-1: color-mix(in srgb, var(--sourya-blue) 5%, var(--sourya-surface));
    --surface-elev-2: color-mix(in srgb, var(--sourya-blue) 8%, var(--sourya-surface));
    --surface-elev-3: color-mix(in srgb, var(--sourya-blue) 11%, var(--sourya-surface));
    --surface-elev-4: color-mix(in srgb, var(--sourya-blue) 12%, var(--sourya-surface));
    --surface-elev-5: color-mix(in srgb, var(--sourya-blue) 14%, var(--sourya-surface));

    --tonal-shadow-0: none;
    --tonal-shadow-1: 0 1px 2px rgba(32, 33, 36, 0.06), 0 1px 3px rgba(32, 33, 36, 0.10);
    --tonal-shadow-2: 0 1px 2px rgba(32, 33, 36, 0.08), 0 2px 6px rgba(32, 33, 36, 0.12);
    --tonal-shadow-3: 0 4px 8px rgba(32, 33, 36, 0.12), 0 1px 3px rgba(32, 33, 36, 0.10);
    --tonal-shadow-4: 0 6px 10px rgba(32, 33, 36, 0.14), 0 2px 4px rgba(32, 33, 36, 0.10);
    --tonal-shadow-5: 0 8px 12px rgba(32, 33, 36, 0.16), 0 4px 6px rgba(32, 33, 36, 0.10);

    /* M3 state-layer opacities - apply as the alpha channel of an on-surface/on-primary overlay */
    --state-hover: 0.08;
    --state-focus: 0.12;
    --state-pressed: 0.16;
    --state-dragged: 0.16;

    /* Ring - inset border for cards */
    --ring-default: inset 0 0 0 1px var(--divider);
    --ring-strong: inset 0 0 0 1px var(--divider-strong);
    --ring-primary: inset 0 0 0 1px var(--primary-outlined-border);
    --ring-focus: 0 0 0 3px var(--primary-focus-visible);

    /* Shape - M3 corner radii; buttons/chips always use --shape-pill */
    --shape-xs: 4px;
    --shape-sm: 8px;
    --shape-md: 12px;
    --shape-lg: 16px;
    --shape-xl: 20px;
    --shape-2xl: 28px;
    --shape-pill: 999px;

    /* Spacing - 4pt grid */
    --sp-0: 0;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 28px;
    --sp-8: 32px;
    --sp-9: 36px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;

    /* Motion */
    --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-spring: 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}