/**
 * Material Design 3 - Main Stylesheet
 * FullEngage Platform
 *
 * This is the main MD3 stylesheet that imports all design tokens and base styles.
 * Import this file in your application to use Material Design 3.
 *
 * Structure:
 * 1. Design Tokens (colors, typography, elevation, spacing, shapes, motion)
 * 2. Base Styles (reset, typography)
 * 3. Utility Classes
 *
 * Usage in your app:
 * @import './styles/md3.css';
 */

/* ==================== DESIGN TOKENS ==================== */

/**
 * Material Design 3 - Design Tokens Index
 *
 * This file imports all MD3 design tokens in the correct order.
 * Import this file in your main stylesheet to use MD3 tokens.
 *
 * Usage:
 * @import './tokens/index.css';
 */

/* Import design tokens in order */

/**
 * Material Design 3 - Color System
 * https://m3.material.io/styles/color/system
 *
 * MD3 uses a dynamic color system based on color roles.
 * Each role has specific semantic meaning and usage.
 */

:root {
  /* ==================== PRIMARY COLOR ROLES ==================== */
  /* Used for key components like FABs, prominent buttons, active states */
  --md-sys-color-primary: #2E5BFF;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #E0E7FF;
  --md-sys-color-on-primary-container: #001849;

  /* ==================== SECONDARY COLOR ROLES ==================== */
  /* Used for less prominent components like filter chips, expanding FABs */
  --md-sys-color-secondary: #00D4AA;
  --md-sys-color-on-secondary: #003828;
  --md-sys-color-secondary-container: #B3F0E0;
  --md-sys-color-on-secondary-container: #002117;

  /* ==================== TERTIARY COLOR ROLES ==================== */
  /* Used to balance primary and secondary colors, or bring heightened attention */
  --md-sys-color-tertiary: #7B61FF;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #E8DDFF;
  --md-sys-color-on-tertiary-container: #1D0062;

  /* ==================== ERROR COLOR ROLES ==================== */
  /* Used for errors in components such as text fields */
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  /* ==================== SUCCESS COLOR (Custom, not in MD3 spec) ==================== */
  --md-sys-color-success: #00C48C;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #B3F0DD;
  --md-sys-color-on-success-container: #002117;

  /* ==================== WARNING COLOR (Custom, not in MD3 spec) ==================== */
  --md-sys-color-warning: #FFA755;
  --md-sys-color-on-warning: #442B00;
  --md-sys-color-warning-container: #FFDDB3;
  --md-sys-color-on-warning-container: #2A1800;

  /* ==================== SURFACE COLOR ROLES ==================== */
  /* Background colors for components */
  --md-sys-color-surface: #FEFBFF;
  --md-sys-color-on-surface: #1B1B1F;
  --md-sys-color-surface-variant: #E1E2EC;
  --md-sys-color-on-surface-variant: #44464F;

  /* Surface containers - different elevation levels */
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F6F6FA;
  --md-sys-color-surface-container: #F0F0F4;
  --md-sys-color-surface-container-high: #EAEAEE;
  --md-sys-color-surface-container-highest: #E4E5E9;

  /* ==================== BACKGROUND COLOR ROLES ==================== */
  --md-sys-color-background: #FEFBFF;
  --md-sys-color-on-background: #1B1B1F;

  /* ==================== OUTLINE COLOR ROLES ==================== */
  /* Used for borders and dividers */
  --md-sys-color-outline: #74777F;
  --md-sys-color-outline-variant: #C4C6D0;

  /* ==================== INVERSE COLOR ROLES ==================== */
  /* Used for inverse surfaces (e.g., snackbars) */
  --md-sys-color-inverse-surface: #303033;
  --md-sys-color-inverse-on-surface: #F2F0F4;
  --md-sys-color-inverse-primary: #BBC3FF;

  /* ==================== SCRIM ==================== */
  /* Used for overlays */
  --md-sys-color-scrim: #000000;

  /* ==================== SHADOW ==================== */
  /* Used for elevation shadows */
  --md-sys-color-shadow: #000000;

  /* ==================== LEGACY COMPATIBILITY (to be deprecated) ==================== */
  /* Keep these for backward compatibility, but prefer MD3 roles above */
  --color-primary: var(--md-sys-color-primary);
  --color-primary-dark: #1A3FCC;
  --color-primary-light: #5C7FFF;
  --color-secondary: var(--md-sys-color-secondary);
  --color-white: #FFFFFF;
  --color-dark: #1A1F36;
}

/* ==================== DARK THEME ==================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Primary */
    --md-sys-color-primary: #BBC3FF;
    --md-sys-color-on-primary: #002787;
    --md-sys-color-primary-container: #1842C4;
    --md-sys-color-on-primary-container: #E0E7FF;

    /* Secondary */
    --md-sys-color-secondary: #6FDDC0;
    --md-sys-color-on-secondary: #00513C;
    --md-sys-color-secondary-container: #007556;
    --md-sys-color-on-secondary-container: #B3F0E0;

    /* Tertiary */
    --md-sys-color-tertiary: #CFC0FF;
    --md-sys-color-on-tertiary: #380094;
    --md-sys-color-tertiary-container: #5331D4;
    --md-sys-color-on-tertiary-container: #E8DDFF;

    /* Error */
    --md-sys-color-error: #FFB4AB;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000A;
    --md-sys-color-on-error-container: #FFDAD6;

    /* Success */
    --md-sys-color-success: #6FDDC0;
    --md-sys-color-on-success: #00513C;
    --md-sys-color-success-container: #007556;
    --md-sys-color-on-success-container: #B3F0DD;

    /* Warning */
    --md-sys-color-warning: #FFB871;
    --md-sys-color-on-warning: #482A00;
    --md-sys-color-warning-container: #664100;
    --md-sys-color-on-warning-container: #FFDDB3;

    /* Surface */
    --md-sys-color-surface: #1B1B1F;
    --md-sys-color-on-surface: #E4E1E6;
    --md-sys-color-surface-variant: #44464F;
    --md-sys-color-on-surface-variant: #C4C6D0;

    /* Surface containers */
    --md-sys-color-surface-container-lowest: #0F0F13;
    --md-sys-color-surface-container-low: #1B1B1F;
    --md-sys-color-surface-container: #1F1F23;
    --md-sys-color-surface-container-high: #292A2D;
    --md-sys-color-surface-container-highest: #343538;

    /* Background */
    --md-sys-color-background: #1B1B1F;
    --md-sys-color-on-background: #E4E1E6;

    /* Outline */
    --md-sys-color-outline: #8E9099;
    --md-sys-color-outline-variant: #44464F;

    /* Inverse */
    --md-sys-color-inverse-surface: #E4E1E6;
    --md-sys-color-inverse-on-surface: #303033;
    --md-sys-color-inverse-primary: #2E5BFF;

    /* Scrim */
    --md-sys-color-scrim: #000000;

    /* Shadow */
    --md-sys-color-shadow: #000000;
  }
}

/* ==================== STATE LAYER OPACITIES ==================== */

/* MD3 defines specific opacity values for interaction states */

:root {
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;
}

/**
 * Material Design 3 - Typography System
 * https://m3.material.io/styles/typography/type-scale-tokens
 *
 * MD3 defines 5 typographic roles with 3 sizes each (15 total styles):
 * - Display (Large, Medium, Small)
 * - Headline (Large, Medium, Small)
 * - Title (Large, Medium, Small)
 * - Body (Large, Medium, Small)
 * - Label (Large, Medium, Small)
 */

:root {
  /* ==================== FONT FAMILIES ==================== */
  --md-sys-typescale-font-family-brand: 'Poppins', system-ui, -apple-system, sans-serif;
  --md-sys-typescale-font-family-plain: 'Inter', system-ui, -apple-system, sans-serif;

  /* ==================== DISPLAY STYLES ==================== */
  /* Large, expressive typography for marketing or showcase content */

  /* Display Large - 57px / 3.5625rem */
  --md-sys-typescale-display-large-font-family: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-display-large-font-size: 3.5625rem;
  --md-sys-typescale-display-large-font-weight: 400;
  --md-sys-typescale-display-large-line-height: 4rem;
  --md-sys-typescale-display-large-letter-spacing: -0.25px;

  /* Display Medium - 45px / 2.8125rem */
  --md-sys-typescale-display-medium-font-family: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-display-medium-font-size: 2.8125rem;
  --md-sys-typescale-display-medium-font-weight: 400;
  --md-sys-typescale-display-medium-line-height: 3.25rem;
  --md-sys-typescale-display-medium-letter-spacing: 0;

  /* Display Small - 36px / 2.25rem */
  --md-sys-typescale-display-small-font-family: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-display-small-font-size: 2.25rem;
  --md-sys-typescale-display-small-font-weight: 400;
  --md-sys-typescale-display-small-line-height: 2.75rem;
  --md-sys-typescale-display-small-letter-spacing: 0;

  /* ==================== HEADLINE STYLES ==================== */
  /* High-emphasis text for short, important content */

  /* Headline Large - 32px / 2rem */
  --md-sys-typescale-headline-large-font-family: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-headline-large-font-size: 2rem;
  --md-sys-typescale-headline-large-font-weight: 600;
  --md-sys-typescale-headline-large-line-height: 2.5rem;
  --md-sys-typescale-headline-large-letter-spacing: 0;

  /* Headline Medium - 28px / 1.75rem */
  --md-sys-typescale-headline-medium-font-family: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-headline-medium-font-size: 1.75rem;
  --md-sys-typescale-headline-medium-font-weight: 600;
  --md-sys-typescale-headline-medium-line-height: 2.25rem;
  --md-sys-typescale-headline-medium-letter-spacing: 0;

  /* Headline Small - 24px / 1.5rem */
  --md-sys-typescale-headline-small-font-family: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-headline-small-font-size: 1.5rem;
  --md-sys-typescale-headline-small-font-weight: 600;
  --md-sys-typescale-headline-small-line-height: 2rem;
  --md-sys-typescale-headline-small-letter-spacing: 0;

  /* ==================== TITLE STYLES ==================== */
  /* Medium-emphasis text for longer content */

  /* Title Large - 22px / 1.375rem */
  --md-sys-typescale-title-large-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-title-large-font-size: 1.375rem;
  --md-sys-typescale-title-large-font-weight: 500;
  --md-sys-typescale-title-large-line-height: 1.75rem;
  --md-sys-typescale-title-large-letter-spacing: 0;

  /* Title Medium - 16px / 1rem */
  --md-sys-typescale-title-medium-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-title-medium-font-size: 1rem;
  --md-sys-typescale-title-medium-font-weight: 500;
  --md-sys-typescale-title-medium-line-height: 1.5rem;
  --md-sys-typescale-title-medium-letter-spacing: 0.15px;

  /* Title Small - 14px / 0.875rem */
  --md-sys-typescale-title-small-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-title-small-font-size: 0.875rem;
  --md-sys-typescale-title-small-font-weight: 500;
  --md-sys-typescale-title-small-line-height: 1.25rem;
  --md-sys-typescale-title-small-letter-spacing: 0.1px;

  /* ==================== BODY STYLES ==================== */
  /* Body text for longer passages of text */

  /* Body Large - 16px / 1rem */
  --md-sys-typescale-body-large-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-body-large-font-size: 1rem;
  --md-sys-typescale-body-large-font-weight: 400;
  --md-sys-typescale-body-large-line-height: 1.5rem;
  --md-sys-typescale-body-large-letter-spacing: 0.5px;

  /* Body Medium - 14px / 0.875rem */
  --md-sys-typescale-body-medium-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-body-medium-font-size: 0.875rem;
  --md-sys-typescale-body-medium-font-weight: 400;
  --md-sys-typescale-body-medium-line-height: 1.25rem;
  --md-sys-typescale-body-medium-letter-spacing: 0.25px;

  /* Body Small - 12px / 0.75rem */
  --md-sys-typescale-body-small-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-body-small-font-size: 0.75rem;
  --md-sys-typescale-body-small-font-weight: 400;
  --md-sys-typescale-body-small-line-height: 1rem;
  --md-sys-typescale-body-small-letter-spacing: 0.4px;

  /* ==================== LABEL STYLES ==================== */
  /* Small text used in components like buttons, tabs, chips */

  /* Label Large - 14px / 0.875rem */
  --md-sys-typescale-label-large-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-label-large-font-size: 0.875rem;
  --md-sys-typescale-label-large-font-weight: 500;
  --md-sys-typescale-label-large-line-height: 1.25rem;
  --md-sys-typescale-label-large-letter-spacing: 0.1px;

  /* Label Medium - 12px / 0.75rem */
  --md-sys-typescale-label-medium-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-label-medium-font-size: 0.75rem;
  --md-sys-typescale-label-medium-font-weight: 500;
  --md-sys-typescale-label-medium-line-height: 1rem;
  --md-sys-typescale-label-medium-letter-spacing: 0.5px;

  /* Label Small - 11px / 0.6875rem */
  --md-sys-typescale-label-small-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-label-small-font-size: 0.6875rem;
  --md-sys-typescale-label-small-font-weight: 500;
  --md-sys-typescale-label-small-line-height: 1rem;
  --md-sys-typescale-label-small-letter-spacing: 0.5px;

  /* ==================== LEGACY COMPATIBILITY ==================== */
  /* Map old variables to MD3 equivalents for gradual migration */
  --font-primary: var(--md-sys-typescale-font-family-plain);
  --font-heading: var(--md-sys-typescale-font-family-brand);

  /* Legacy font sizes - map to closest MD3 equivalent */
  --text-xs: var(--md-sys-typescale-label-small-font-size);
  --text-sm: var(--md-sys-typescale-body-small-font-size);
  --text-base: var(--md-sys-typescale-body-large-font-size);
  --text-lg: var(--md-sys-typescale-title-large-font-size);
  --text-xl: var(--md-sys-typescale-headline-small-font-size);
  --text-2xl: var(--md-sys-typescale-headline-medium-font-size);
  --text-3xl: var(--md-sys-typescale-headline-large-font-size);
  --text-4xl: var(--md-sys-typescale-display-small-font-size);
  --text-5xl: var(--md-sys-typescale-display-medium-font-size);
  --text-6xl: var(--md-sys-typescale-display-large-font-size);

  /* Legacy font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
}

/* ==================== UTILITY CLASSES ==================== */

/* Pre-built classes for common typography styles */

.md-typescale-display-large {
  font-family: var(--md-sys-typescale-display-large-font-family);
  font-size: var(--md-sys-typescale-display-large-font-size);
  font-weight: var(--md-sys-typescale-display-large-font-weight);
  line-height: var(--md-sys-typescale-display-large-line-height);
  letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
}

.md-typescale-display-medium {
  font-family: var(--md-sys-typescale-display-medium-font-family);
  font-size: var(--md-sys-typescale-display-medium-font-size);
  font-weight: var(--md-sys-typescale-display-medium-font-weight);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
}

.md-typescale-display-small {
  font-family: var(--md-sys-typescale-display-small-font-family);
  font-size: var(--md-sys-typescale-display-small-font-size);
  font-weight: var(--md-sys-typescale-display-small-font-weight);
  line-height: var(--md-sys-typescale-display-small-line-height);
  letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
}

.md-typescale-headline-large {
  font-family: var(--md-sys-typescale-headline-large-font-family);
  font-size: var(--md-sys-typescale-headline-large-font-size);
  font-weight: var(--md-sys-typescale-headline-large-font-weight);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
}

.md-typescale-headline-medium {
  font-family: var(--md-sys-typescale-headline-medium-font-family);
  font-size: var(--md-sys-typescale-headline-medium-font-size);
  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
}

.md-typescale-headline-small {
  font-family: var(--md-sys-typescale-headline-small-font-family);
  font-size: var(--md-sys-typescale-headline-small-font-size);
  font-weight: var(--md-sys-typescale-headline-small-font-weight);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
}

.md-typescale-title-large {
  font-family: var(--md-sys-typescale-title-large-font-family);
  font-size: var(--md-sys-typescale-title-large-font-size);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
  line-height: var(--md-sys-typescale-title-large-line-height);
  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
}

.md-typescale-title-medium {
  font-family: var(--md-sys-typescale-title-medium-font-family);
  font-size: var(--md-sys-typescale-title-medium-font-size);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
}

.md-typescale-title-small {
  font-family: var(--md-sys-typescale-title-small-font-family);
  font-size: var(--md-sys-typescale-title-small-font-size);
  font-weight: var(--md-sys-typescale-title-small-font-weight);
  line-height: var(--md-sys-typescale-title-small-line-height);
  letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
}

.md-typescale-body-large {
  font-family: var(--md-sys-typescale-body-large-font-family);
  font-size: var(--md-sys-typescale-body-large-font-size);
  font-weight: var(--md-sys-typescale-body-large-font-weight);
  line-height: var(--md-sys-typescale-body-large-line-height);
  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
}

.md-typescale-body-medium {
  font-family: var(--md-sys-typescale-body-medium-font-family);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
}

.md-typescale-body-small {
  font-family: var(--md-sys-typescale-body-small-font-family);
  font-size: var(--md-sys-typescale-body-small-font-size);
  font-weight: var(--md-sys-typescale-body-small-font-weight);
  line-height: var(--md-sys-typescale-body-small-line-height);
  letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
}

.md-typescale-label-large {
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  line-height: var(--md-sys-typescale-label-large-line-height);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
}

.md-typescale-label-medium {
  font-family: var(--md-sys-typescale-label-medium-font-family);
  font-size: var(--md-sys-typescale-label-medium-font-size);
  font-weight: var(--md-sys-typescale-label-medium-font-weight);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
}

.md-typescale-label-small {
  font-family: var(--md-sys-typescale-label-small-font-family);
  font-size: var(--md-sys-typescale-label-small-font-size);
  font-weight: var(--md-sys-typescale-label-small-font-weight);
  line-height: var(--md-sys-typescale-label-small-line-height);
  letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
}

/**
 * Material Design 3 - Elevation System
 * https://m3.material.io/styles/elevation/tokens
 *
 * MD3 uses elevation levels 0-5 to express hierarchy and focus.
 * Elevation is expressed through shadow and surface tint (in dark theme).
 */

:root {
  /* ==================== ELEVATION SHADOWS ==================== */
  /* Level 0 - No elevation */
  --md-sys-elevation-level0: none;

  /* Level 1 - Slightly raised (e.g., filled buttons at rest, cards at rest) */
  --md-sys-elevation-level1:
    0px 1px 2px 0px rgba(0, 0, 0, 0.30),
    0px 1px 3px 1px rgba(0, 0, 0, 0.15);

  /* Level 2 - Elevated (e.g., filled buttons on hover, cards on hover) */
  --md-sys-elevation-level2:
    0px 1px 2px 0px rgba(0, 0, 0, 0.30),
    0px 2px 6px 2px rgba(0, 0, 0, 0.15);

  /* Level 3 - Modal surfaces (e.g., dialogs, pickers, menus) */
  --md-sys-elevation-level3:
    0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px 0px rgba(0, 0, 0, 0.30);

  /* Level 4 - Floating action buttons, navigation drawer */
  --md-sys-elevation-level4:
    0px 6px 10px 4px rgba(0, 0, 0, 0.15),
    0px 2px 3px 0px rgba(0, 0, 0, 0.30);

  /* Level 5 - Top app bar in scroll state, nav bar */
  --md-sys-elevation-level5:
    0px 8px 12px 6px rgba(0, 0, 0, 0.15),
    0px 4px 4px 0px rgba(0, 0, 0, 0.30);

  /* ==================== SURFACE TINT (for dark theme) ==================== */
  /* MD3 uses surface tint overlay in dark theme instead of just shadows */
  --md-sys-elevation-surface-tint-layer-1: rgba(var(--md-sys-color-primary-rgb), 0.05);
  --md-sys-elevation-surface-tint-layer-2: rgba(var(--md-sys-color-primary-rgb), 0.08);
  --md-sys-elevation-surface-tint-layer-3: rgba(var(--md-sys-color-primary-rgb), 0.11);
  --md-sys-elevation-surface-tint-layer-4: rgba(var(--md-sys-color-primary-rgb), 0.12);
  --md-sys-elevation-surface-tint-layer-5: rgba(var(--md-sys-color-primary-rgb), 0.14);

  /* Primary color in RGB format for tint calculations */
  --md-sys-color-primary-rgb: 46, 91, 255;

  /* ==================== LEGACY COMPATIBILITY ==================== */
  /* Map old shadow variables to MD3 levels */
  --shadow-xs: var(--md-sys-elevation-level0);
  --shadow-sm: var(--md-sys-elevation-level1);
  --shadow-md: var(--md-sys-elevation-level2);
  --shadow-lg: var(--md-sys-elevation-level3);
  --shadow-xl: var(--md-sys-elevation-level4);
}

/* ==================== DARK THEME ELEVATION ==================== */

/* In dark theme, use surface tint overlays */

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary-rgb: 187, 195, 255; /* Lighter primary for dark theme */
  }
}

/* ==================== UTILITY CLASSES ==================== */

/* Pre-built classes for common elevation levels */

.md-elevation-0 {
  box-shadow: var(--md-sys-elevation-level0);
}

.md-elevation-1 {
  box-shadow: var(--md-sys-elevation-level1);
}

.md-elevation-2 {
  box-shadow: var(--md-sys-elevation-level2);
}

.md-elevation-3 {
  box-shadow: var(--md-sys-elevation-level3);
}

.md-elevation-4 {
  box-shadow: var(--md-sys-elevation-level4);
}

.md-elevation-5 {
  box-shadow: var(--md-sys-elevation-level5);
}

/* Elevation with transitions for interactive elements */

.md-elevation-transition {
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== COMPONENT-SPECIFIC ELEVATION ==================== */

/* Buttons */

.md-elevation-button-resting {
  box-shadow: var(--md-sys-elevation-level0);
}

.md-elevation-button-hover {
  box-shadow: var(--md-sys-elevation-level1);
}

.md-elevation-button-pressed {
  box-shadow: var(--md-sys-elevation-level0);
}

/* Cards */

.md-elevation-card-resting {
  box-shadow: var(--md-sys-elevation-level1);
}

.md-elevation-card-hover {
  box-shadow: var(--md-sys-elevation-level2);
}

.md-elevation-card-dragged {
  box-shadow: var(--md-sys-elevation-level4);
}

/* FAB (Floating Action Button) */

.md-elevation-fab-resting {
  box-shadow: var(--md-sys-elevation-level3);
}

.md-elevation-fab-hover {
  box-shadow: var(--md-sys-elevation-level4);
}

.md-elevation-fab-pressed {
  box-shadow: var(--md-sys-elevation-level3);
}

/* Dialogs & Modals */

.md-elevation-dialog {
  box-shadow: var(--md-sys-elevation-level3);
}

/* Navigation Drawer */

.md-elevation-nav-drawer {
  box-shadow: var(--md-sys-elevation-level0);
}

.md-elevation-nav-drawer-modal {
  box-shadow: var(--md-sys-elevation-level1);
}

/* Top App Bar */

.md-elevation-app-bar-resting {
  box-shadow: var(--md-sys-elevation-level0);
}

.md-elevation-app-bar-scrolled {
  box-shadow: var(--md-sys-elevation-level2);
}

/* Menus & Dropdowns */

.md-elevation-menu {
  box-shadow: var(--md-sys-elevation-level2);
}

/* ==================== PERFORMANCE OPTIMIZATION ==================== */

/* Use will-change for elements that frequently change elevation */

.md-elevation-will-change {
  will-change: box-shadow;
}

/* Use GPU acceleration for elevation transitions */

.md-elevation-gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/**
 * Material Design 3 - Spacing System
 * https://m3.material.io/foundations/layout/applying-layout/spacing
 *
 * MD3 uses a 4px base grid system for consistent spacing.
 * All spacing should be multiples of 4px for visual harmony.
 */

:root {
  /* ==================== BASE GRID ==================== */
  --md-sys-spacing-base: 4px;

  /* ==================== SPACING SCALE ==================== */
  /* Following 4px base grid: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96 */

  --md-sys-spacing-0: 0px;
  --md-sys-spacing-1: 4px;    /* 1 × base */
  --md-sys-spacing-2: 8px;    /* 2 × base */
  --md-sys-spacing-3: 12px;   /* 3 × base */
  --md-sys-spacing-4: 16px;   /* 4 × base */
  --md-sys-spacing-5: 20px;   /* 5 × base */
  --md-sys-spacing-6: 24px;   /* 6 × base */
  --md-sys-spacing-8: 32px;   /* 8 × base */
  --md-sys-spacing-10: 40px;  /* 10 × base */
  --md-sys-spacing-12: 48px;  /* 12 × base */
  --md-sys-spacing-16: 64px;  /* 16 × base */
  --md-sys-spacing-20: 80px;  /* 20 × base */
  --md-sys-spacing-24: 96px;  /* 24 × base */
  --md-sys-spacing-32: 128px; /* 32 × base */

  /* ==================== SEMANTIC SPACING ==================== */
  /* Named spacing for common use cases */

  /* Compact spacing for dense layouts */
  --md-sys-spacing-compact-xs: var(--md-sys-spacing-1);
  --md-sys-spacing-compact-sm: var(--md-sys-spacing-2);
  --md-sys-spacing-compact-md: var(--md-sys-spacing-3);
  --md-sys-spacing-compact-lg: var(--md-sys-spacing-4);

  /* Standard spacing for normal layouts */
  --md-sys-spacing-standard-xs: var(--md-sys-spacing-2);
  --md-sys-spacing-standard-sm: var(--md-sys-spacing-4);
  --md-sys-spacing-standard-md: var(--md-sys-spacing-6);
  --md-sys-spacing-standard-lg: var(--md-sys-spacing-8);
  --md-sys-spacing-standard-xl: var(--md-sys-spacing-12);

  /* Spacious spacing for comfortable layouts */
  --md-sys-spacing-spacious-xs: var(--md-sys-spacing-4);
  --md-sys-spacing-spacious-sm: var(--md-sys-spacing-6);
  --md-sys-spacing-spacious-md: var(--md-sys-spacing-8);
  --md-sys-spacing-spacious-lg: var(--md-sys-spacing-12);
  --md-sys-spacing-spacious-xl: var(--md-sys-spacing-16);

  /* ==================== COMPONENT SPACING ==================== */
  /* Specific spacing values for common components */

  /* Buttons */
  --md-sys-spacing-button-padding-horizontal: var(--md-sys-spacing-6);
  --md-sys-spacing-button-padding-vertical: var(--md-sys-spacing-2);
  --md-sys-spacing-button-gap: var(--md-sys-spacing-2);

  /* Cards */
  --md-sys-spacing-card-padding: var(--md-sys-spacing-6);
  --md-sys-spacing-card-gap: var(--md-sys-spacing-4);

  /* Forms */
  --md-sys-spacing-form-field-gap: var(--md-sys-spacing-4);
  --md-sys-spacing-form-section-gap: var(--md-sys-spacing-8);

  /* Lists */
  --md-sys-spacing-list-item-padding: var(--md-sys-spacing-4);
  --md-sys-spacing-list-item-gap: var(--md-sys-spacing-2);

  /* Dialogs */
  --md-sys-spacing-dialog-padding: var(--md-sys-spacing-6);
  --md-sys-spacing-dialog-title-padding: var(--md-sys-spacing-6);
  --md-sys-spacing-dialog-content-padding: var(--md-sys-spacing-6);
  --md-sys-spacing-dialog-actions-padding: var(--md-sys-spacing-6);

  /* Navigation */
  --md-sys-spacing-nav-item-padding: var(--md-sys-spacing-4);
  --md-sys-spacing-nav-item-gap: var(--md-sys-spacing-1);

  /* Chips */
  --md-sys-spacing-chip-padding-horizontal: var(--md-sys-spacing-4);
  --md-sys-spacing-chip-padding-vertical: var(--md-sys-spacing-2);
  --md-sys-spacing-chip-gap: var(--md-sys-spacing-2);

  /* ==================== LAYOUT SPACING ==================== */
  /* Container and section spacing */

  --md-sys-spacing-container-padding-mobile: var(--md-sys-spacing-4);
  --md-sys-spacing-container-padding-tablet: var(--md-sys-spacing-6);
  --md-sys-spacing-container-padding-desktop: var(--md-sys-spacing-8);

  --md-sys-spacing-section-gap-mobile: var(--md-sys-spacing-12);
  --md-sys-spacing-section-gap-tablet: var(--md-sys-spacing-16);
  --md-sys-spacing-section-gap-desktop: var(--md-sys-spacing-20);

  /* ==================== LEGACY COMPATIBILITY ==================== */
  /* Map old spacing variables to MD3 equivalents */

  --space-xs: var(--md-sys-spacing-1);
  --space-sm: var(--md-sys-spacing-2);
  --space-md: var(--md-sys-spacing-4);
  --space-lg: var(--md-sys-spacing-6);
  --space-xl: var(--md-sys-spacing-8);
  --space-2xl: var(--md-sys-spacing-12);
  --space-3xl: var(--md-sys-spacing-16);
  --space-4xl: var(--md-sys-spacing-24);

  /* Responsive spacing variables */
  --spacing-xs: var(--md-sys-spacing-1);
  --spacing-sm: var(--md-sys-spacing-2);
  --spacing-md: var(--md-sys-spacing-4);
  --spacing-lg: var(--md-sys-spacing-6);
  --spacing-xl: var(--md-sys-spacing-8);
  --spacing-xxl: var(--md-sys-spacing-12);
  --spacing-xxxl: var(--md-sys-spacing-16);
}

/* ==================== UTILITY CLASSES ==================== */

/* Spacing utility classes for rapid prototyping */

/* Margin utilities */

.md-m-0 { margin: var(--md-sys-spacing-0); }

.md-m-1 { margin: var(--md-sys-spacing-1); }

.md-m-2 { margin: var(--md-sys-spacing-2); }

.md-m-3 { margin: var(--md-sys-spacing-3); }

.md-m-4 { margin: var(--md-sys-spacing-4); }

.md-m-5 { margin: var(--md-sys-spacing-5); }

.md-m-6 { margin: var(--md-sys-spacing-6); }

.md-m-8 { margin: var(--md-sys-spacing-8); }

.md-m-10 { margin: var(--md-sys-spacing-10); }

.md-m-12 { margin: var(--md-sys-spacing-12); }

/* Margin top */

.md-mt-0 { margin-top: var(--md-sys-spacing-0); }

.md-mt-1 { margin-top: var(--md-sys-spacing-1); }

.md-mt-2 { margin-top: var(--md-sys-spacing-2); }

.md-mt-3 { margin-top: var(--md-sys-spacing-3); }

.md-mt-4 { margin-top: var(--md-sys-spacing-4); }

.md-mt-5 { margin-top: var(--md-sys-spacing-5); }

.md-mt-6 { margin-top: var(--md-sys-spacing-6); }

.md-mt-8 { margin-top: var(--md-sys-spacing-8); }

.md-mt-12 { margin-top: var(--md-sys-spacing-12); }

/* Margin bottom */

.md-mb-0 { margin-bottom: var(--md-sys-spacing-0); }

.md-mb-1 { margin-bottom: var(--md-sys-spacing-1); }

.md-mb-2 { margin-bottom: var(--md-sys-spacing-2); }

.md-mb-3 { margin-bottom: var(--md-sys-spacing-3); }

.md-mb-4 { margin-bottom: var(--md-sys-spacing-4); }

.md-mb-5 { margin-bottom: var(--md-sys-spacing-5); }

.md-mb-6 { margin-bottom: var(--md-sys-spacing-6); }

.md-mb-8 { margin-bottom: var(--md-sys-spacing-8); }

.md-mb-12 { margin-bottom: var(--md-sys-spacing-12); }

/* Margin left */

.md-ml-0 { margin-left: var(--md-sys-spacing-0); }

.md-ml-1 { margin-left: var(--md-sys-spacing-1); }

.md-ml-2 { margin-left: var(--md-sys-spacing-2); }

.md-ml-3 { margin-left: var(--md-sys-spacing-3); }

.md-ml-4 { margin-left: var(--md-sys-spacing-4); }

.md-ml-6 { margin-left: var(--md-sys-spacing-6); }

/* Margin right */

.md-mr-0 { margin-right: var(--md-sys-spacing-0); }

.md-mr-1 { margin-right: var(--md-sys-spacing-1); }

.md-mr-2 { margin-right: var(--md-sys-spacing-2); }

.md-mr-3 { margin-right: var(--md-sys-spacing-3); }

.md-mr-4 { margin-right: var(--md-sys-spacing-4); }

.md-mr-6 { margin-right: var(--md-sys-spacing-6); }

/* Padding utilities */

.md-p-0 { padding: var(--md-sys-spacing-0); }

.md-p-1 { padding: var(--md-sys-spacing-1); }

.md-p-2 { padding: var(--md-sys-spacing-2); }

.md-p-3 { padding: var(--md-sys-spacing-3); }

.md-p-4 { padding: var(--md-sys-spacing-4); }

.md-p-5 { padding: var(--md-sys-spacing-5); }

.md-p-6 { padding: var(--md-sys-spacing-6); }

.md-p-8 { padding: var(--md-sys-spacing-8); }

.md-p-10 { padding: var(--md-sys-spacing-10); }

.md-p-12 { padding: var(--md-sys-spacing-12); }

/* Padding top */

.md-pt-0 { padding-top: var(--md-sys-spacing-0); }

.md-pt-1 { padding-top: var(--md-sys-spacing-1); }

.md-pt-2 { padding-top: var(--md-sys-spacing-2); }

.md-pt-3 { padding-top: var(--md-sys-spacing-3); }

.md-pt-4 { padding-top: var(--md-sys-spacing-4); }

.md-pt-6 { padding-top: var(--md-sys-spacing-6); }

.md-pt-8 { padding-top: var(--md-sys-spacing-8); }

/* Padding bottom */

.md-pb-0 { padding-bottom: var(--md-sys-spacing-0); }

.md-pb-1 { padding-bottom: var(--md-sys-spacing-1); }

.md-pb-2 { padding-bottom: var(--md-sys-spacing-2); }

.md-pb-3 { padding-bottom: var(--md-sys-spacing-3); }

.md-pb-4 { padding-bottom: var(--md-sys-spacing-4); }

.md-pb-6 { padding-bottom: var(--md-sys-spacing-6); }

.md-pb-8 { padding-bottom: var(--md-sys-spacing-8); }

/* Padding left */

.md-pl-0 { padding-left: var(--md-sys-spacing-0); }

.md-pl-1 { padding-left: var(--md-sys-spacing-1); }

.md-pl-2 { padding-left: var(--md-sys-spacing-2); }

.md-pl-3 { padding-left: var(--md-sys-spacing-3); }

.md-pl-4 { padding-left: var(--md-sys-spacing-4); }

.md-pl-6 { padding-left: var(--md-sys-spacing-6); }

/* Padding right */

.md-pr-0 { padding-right: var(--md-sys-spacing-0); }

.md-pr-1 { padding-right: var(--md-sys-spacing-1); }

.md-pr-2 { padding-right: var(--md-sys-spacing-2); }

.md-pr-3 { padding-right: var(--md-sys-spacing-3); }

.md-pr-4 { padding-right: var(--md-sys-spacing-4); }

.md-pr-6 { padding-right: var(--md-sys-spacing-6); }

/* Gap utilities (for flexbox/grid) */

.md-gap-0 { gap: var(--md-sys-spacing-0); }

.md-gap-1 { gap: var(--md-sys-spacing-1); }

.md-gap-2 { gap: var(--md-sys-spacing-2); }

.md-gap-3 { gap: var(--md-sys-spacing-3); }

.md-gap-4 { gap: var(--md-sys-spacing-4); }

.md-gap-5 { gap: var(--md-sys-spacing-5); }

.md-gap-6 { gap: var(--md-sys-spacing-6); }

.md-gap-8 { gap: var(--md-sys-spacing-8); }

.md-gap-12 { gap: var(--md-sys-spacing-12); }

/**
 * Material Design 3 - Shape System
 * https://m3.material.io/styles/shape/shape-scale-tokens
 *
 * MD3 defines a shape scale for corner radii to create visual consistency.
 * Shapes help establish hierarchy and brand expression.
 */

:root {
  /* ==================== SHAPE SCALE ==================== */
  /* MD3 defines 4 main shape families: None, Extra Small, Small, Medium, Large, Extra Large, Full */

  /* None - No rounding (0px) */
  --md-sys-shape-corner-none: 0px;

  /* Extra Small - Subtle rounding (4px) */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-extra-small-top: 4px 4px 0px 0px;

  /* Small - Small components (8px) */
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-small-top: 8px 8px 0px 0px;

  /* Medium - Cards, larger components (12px) */
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-medium-top: 12px 12px 0px 0px;

  /* Large - Navigation drawer, bottom sheets (16px) */
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-top: 16px 16px 0px 0px;
  --md-sys-shape-corner-large-end: 0px 16px 16px 0px;

  /* Extra Large - Dialogs, time pickers (28px) */
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-top: 28px 28px 0px 0px;

  /* Full - Completely rounded (9999px - pill shape) */
  --md-sys-shape-corner-full: 9999px;

  /* ==================== COMPONENT-SPECIFIC SHAPES ==================== */
  /* Specific shape values for common components per MD3 spec */

  /* Buttons */
  --md-sys-shape-button: 20px;               /* Filled, outlined, text buttons */
  --md-sys-shape-button-small: 16px;         /* Small buttons */
  --md-sys-shape-button-large: 24px;         /* Large buttons */

  /* FAB (Floating Action Button) */
  --md-sys-shape-fab-small: 12px;            /* Small FAB */
  --md-sys-shape-fab-medium: 16px;           /* Medium FAB */
  --md-sys-shape-fab-large: 28px;            /* Large FAB */
  --md-sys-shape-fab-extended: 16px;         /* Extended FAB */

  /* Cards */
  --md-sys-shape-card-elevated: 12px;        /* Elevated cards */
  --md-sys-shape-card-filled: 12px;          /* Filled cards */
  --md-sys-shape-card-outlined: 12px;        /* Outlined cards */

  /* Chips */
  --md-sys-shape-chip-assist: 8px;           /* Assist chips */
  --md-sys-shape-chip-filter: 8px;           /* Filter chips */
  --md-sys-shape-chip-input: 8px;            /* Input chips */
  --md-sys-shape-chip-suggestion: 8px;       /* Suggestion chips */

  /* Dialogs */
  --md-sys-shape-dialog: 28px;               /* Dialog containers */
  --md-sys-shape-dialog-full-screen: 0px;    /* Full-screen dialogs */

  /* Text Fields */
  --md-sys-shape-text-field-filled: 4px 4px 0px 0px;    /* Filled text field */
  --md-sys-shape-text-field-outlined: 4px;              /* Outlined text field */

  /* Menus */
  --md-sys-shape-menu: 4px;                  /* Dropdown menus */

  /* Navigation */
  --md-sys-shape-navigation-drawer: 0px 16px 16px 0px;  /* Navigation drawer */
  --md-sys-shape-navigation-rail: 0px;                  /* Navigation rail */
  --md-sys-shape-navigation-bar: 0px;                   /* Bottom navigation bar */

  /* Sheets */
  --md-sys-shape-sheet-bottom: 28px 28px 0px 0px;      /* Bottom sheets */
  --md-sys-shape-sheet-side: 0px 28px 28px 0px;        /* Side sheets */

  /* Snackbar */
  --md-sys-shape-snackbar: 4px;             /* Snackbar */

  /* Tooltip */
  --md-sys-shape-tooltip: 4px;              /* Tooltip */

  /* Switch */
  --md-sys-shape-switch: 16px;              /* Switch track */
  --md-sys-shape-switch-handle: 8px;        /* Switch handle */

  /* ==================== LEGACY COMPATIBILITY ==================== */
  /* Map old radius variables to MD3 equivalents */

  --radius-sm: var(--md-sys-shape-corner-small);
  --radius-md: var(--md-sys-shape-corner-medium);
  --radius-lg: var(--md-sys-shape-corner-large);
  --radius-xl: var(--md-sys-shape-corner-extra-large);
  --radius-full: var(--md-sys-shape-corner-full);
}

/* ==================== UTILITY CLASSES ==================== */

/* Shape utility classes for rapid prototyping */

/* Corner radius utilities */

.md-shape-none {
  border-radius: var(--md-sys-shape-corner-none);
}

.md-shape-extra-small {
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.md-shape-small {
  border-radius: var(--md-sys-shape-corner-small);
}

.md-shape-medium {
  border-radius: var(--md-sys-shape-corner-medium);
}

.md-shape-large {
  border-radius: var(--md-sys-shape-corner-large);
}

.md-shape-extra-large {
  border-radius: var(--md-sys-shape-corner-extra-large);
}

.md-shape-full {
  border-radius: var(--md-sys-shape-corner-full);
}

/* Top-only rounding */

.md-shape-extra-small-top {
  border-radius: var(--md-sys-shape-corner-extra-small-top);
}

.md-shape-small-top {
  border-radius: var(--md-sys-shape-corner-small-top);
}

.md-shape-medium-top {
  border-radius: var(--md-sys-shape-corner-medium-top);
}

.md-shape-large-top {
  border-radius: var(--md-sys-shape-corner-large-top);
}

.md-shape-extra-large-top {
  border-radius: var(--md-sys-shape-corner-extra-large-top);
}

/* End rounding (for RTL support) */

.md-shape-large-end {
  border-radius: var(--md-sys-shape-corner-large-end);
}

/* Component-specific shape classes */

.md-shape-button {
  border-radius: var(--md-sys-shape-button);
}

.md-shape-card {
  border-radius: var(--md-sys-shape-card-elevated);
}

.md-shape-chip {
  border-radius: var(--md-sys-shape-chip-assist);
}

.md-shape-dialog {
  border-radius: var(--md-sys-shape-dialog);
}

.md-shape-text-field-filled {
  border-radius: var(--md-sys-shape-text-field-filled);
}

.md-shape-text-field-outlined {
  border-radius: var(--md-sys-shape-text-field-outlined);
}

/**
 * Material Design 3 - Motion System
 * https://m3.material.io/styles/motion/easing-and-duration/tokens-specs
 *
 * MD3 defines motion tokens for duration and easing to create cohesive animations.
 * Motion helps guide user attention and provides feedback.
 */

:root {
  /* ==================== DURATION TOKENS ==================== */
  /* Short durations - Simple animations (50-200ms) */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;

  /* Medium durations - Standard animations (250-400ms) */
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;

  /* Long durations - Complex animations (450-700ms) */
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;

  /* Extra long durations - Large motion (700-1000ms) */
  --md-sys-motion-duration-extra-long1: 700ms;
  --md-sys-motion-duration-extra-long2: 800ms;
  --md-sys-motion-duration-extra-long3: 900ms;
  --md-sys-motion-duration-extra-long4: 1000ms;

  /* ==================== EASING TOKENS ==================== */
  /* MD3 defines 4 types of easing curves */

  /* Emphasized - For attention-grabbing motion (default for most animations) */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* Standard - Smooth, subtle motion */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* Legacy - For compatibility with older Material Design */
  --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-motion-easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --md-sys-motion-easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* Linear - Constant speed (use sparingly) */
  --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);

  /* ==================== COMMON MOTION PATTERNS ==================== */
  /* Pre-defined combinations for common use cases */

  /* Enter animations (elements appearing) */
  --md-sys-motion-enter-duration: var(--md-sys-motion-duration-medium2);
  --md-sys-motion-enter-easing: var(--md-sys-motion-easing-emphasized-decelerate);

  /* Exit animations (elements disappearing) */
  --md-sys-motion-exit-duration: var(--md-sys-motion-duration-short4);
  --md-sys-motion-exit-easing: var(--md-sys-motion-easing-emphasized-accelerate);

  /* Transition animations (state changes) */
  --md-sys-motion-transition-duration: var(--md-sys-motion-duration-medium2);
  --md-sys-motion-transition-easing: var(--md-sys-motion-easing-emphasized);

  /* ==================== COMPONENT-SPECIFIC MOTION ==================== */

  /* Buttons */
  --md-sys-motion-button-hover-duration: var(--md-sys-motion-duration-short2);
  --md-sys-motion-button-hover-easing: var(--md-sys-motion-easing-standard);
  --md-sys-motion-button-press-duration: var(--md-sys-motion-duration-short1);
  --md-sys-motion-button-press-easing: var(--md-sys-motion-easing-standard-accelerate);

  /* Cards */
  --md-sys-motion-card-hover-duration: var(--md-sys-motion-duration-medium2);
  --md-sys-motion-card-hover-easing: var(--md-sys-motion-easing-emphasized);

  /* Dialogs */
  --md-sys-motion-dialog-enter-duration: var(--md-sys-motion-duration-medium4);
  --md-sys-motion-dialog-enter-easing: var(--md-sys-motion-easing-emphasized-decelerate);
  --md-sys-motion-dialog-exit-duration: var(--md-sys-motion-duration-short4);
  --md-sys-motion-dialog-exit-easing: var(--md-sys-motion-easing-emphasized-accelerate);

  /* Drawers */
  --md-sys-motion-drawer-duration: var(--md-sys-motion-duration-medium4);
  --md-sys-motion-drawer-easing: var(--md-sys-motion-easing-emphasized);

  /* Snackbar */
  --md-sys-motion-snackbar-enter-duration: var(--md-sys-motion-duration-medium2);
  --md-sys-motion-snackbar-enter-easing: var(--md-sys-motion-easing-emphasized-decelerate);
  --md-sys-motion-snackbar-exit-duration: var(--md-sys-motion-duration-short3);
  --md-sys-motion-snackbar-exit-easing: var(--md-sys-motion-easing-emphasized-accelerate);

  /* FAB */
  --md-sys-motion-fab-transform-duration: var(--md-sys-motion-duration-medium2);
  --md-sys-motion-fab-transform-easing: var(--md-sys-motion-easing-emphasized);

  /* Chips */
  --md-sys-motion-chip-duration: var(--md-sys-motion-duration-short2);
  --md-sys-motion-chip-easing: var(--md-sys-motion-easing-standard);

  /* Ripple effect */
  --md-sys-motion-ripple-duration: var(--md-sys-motion-duration-medium3);
  --md-sys-motion-ripple-easing: var(--md-sys-motion-easing-standard);

  /* ==================== LEGACY COMPATIBILITY ==================== */
  /* Map old transition variables to MD3 equivalents */

  --transition-fast: var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
  --transition-base: var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  --transition-slow: var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
}

/* ==================== UTILITY CLASSES ==================== */

/* Motion utility classes for rapid prototyping */

/* Transition all properties */

.md-motion-transition {
  transition: all var(--md-sys-motion-transition-duration) var(--md-sys-motion-transition-easing);
}

.md-motion-transition-fast {
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}

.md-motion-transition-slow {
  transition: all var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
}

/* Specific property transitions */

.md-motion-transition-transform {
  transition: transform var(--md-sys-motion-transition-duration) var(--md-sys-motion-transition-easing);
}

.md-motion-transition-opacity {
  transition: opacity var(--md-sys-motion-transition-duration) var(--md-sys-motion-transition-easing);
}

.md-motion-transition-colors {
  transition:
    background-color var(--md-sys-motion-transition-duration) var(--md-sys-motion-transition-easing),
    border-color var(--md-sys-motion-transition-duration) var(--md-sys-motion-transition-easing),
    color var(--md-sys-motion-transition-duration) var(--md-sys-motion-transition-easing);
}

/* Performance optimization - will-change */

.md-motion-will-change-transform {
  will-change: transform;
}

.md-motion-will-change-opacity {
  will-change: opacity;
}

.md-motion-will-change-auto {
  will-change: auto;
}

/* ==================== ANIMATION KEYFRAMES ==================== */

/* Common MD3 animation patterns */

/* Fade in */

@keyframes md-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.md-animation-fade-in {
  animation: md-fade-in var(--md-sys-motion-enter-duration) var(--md-sys-motion-enter-easing);
}

/* Fade out */

@keyframes md-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.md-animation-fade-out {
  animation: md-fade-out var(--md-sys-motion-exit-duration) var(--md-sys-motion-exit-easing);
}

/* Slide in from bottom */

@keyframes md-slide-in-bottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.md-animation-slide-in-bottom {
  animation: md-slide-in-bottom var(--md-sys-motion-enter-duration) var(--md-sys-motion-enter-easing);
}

/* Slide out to bottom */

@keyframes md-slide-out-bottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.md-animation-slide-out-bottom {
  animation: md-slide-out-bottom var(--md-sys-motion-exit-duration) var(--md-sys-motion-exit-easing);
}

/* Scale in */

@keyframes md-scale-in {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.md-animation-scale-in {
  animation: md-scale-in var(--md-sys-motion-enter-duration) var(--md-sys-motion-enter-easing);
}

/* Scale out */

@keyframes md-scale-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.8);
    opacity: 0;
  }
}

.md-animation-scale-out {
  animation: md-scale-out var(--md-sys-motion-exit-duration) var(--md-sys-motion-exit-easing);
}

/* Ripple effect */

@keyframes md-ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.md-animation-ripple {
  animation: md-ripple var(--md-sys-motion-ripple-duration) var(--md-sys-motion-ripple-easing);
}

/* ==================== REDUCED MOTION ==================== */

/* Respect user preferences for reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================== BASE STYLES ==================== */

/**
 * Modern CSS Reset
 * Optimized for performance and accessibility
 */

/* Box sizing reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins and padding */

* {
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation on mobile */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Set core root defaults */

html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset heading styles */

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Reset paragraph styles */

p {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Remove list styles */

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Make images easier to work with */

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

/* Remove default button styles */

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Remove animations for people who've turned them off */

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Remove default link underline */

a {
  text-decoration: none;
  color: inherit;
}

/* Ensure text overflow is handled correctly */

input,
textarea {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

textarea {
  white-space: pre-wrap;
}

/**
 * Base Typography Styles
 * Applies MD3 typography tokens to HTML elements
 */

/* Apply base font to body */

body {
  font-family: var(--md-sys-typescale-body-large-font-family);
  font-size: var(--md-sys-typescale-body-large-font-size);
  font-weight: var(--md-sys-typescale-body-large-font-weight);
  line-height: var(--md-sys-typescale-body-large-line-height);
  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
  color: var(--md-sys-color-on-background);
}

/* Headings - using MD3 headline scale */

h1 {
  font-family: var(--md-sys-typescale-display-small-font-family);
  font-size: var(--md-sys-typescale-display-small-font-size);
  font-weight: var(--md-sys-typescale-display-small-font-weight);
  line-height: var(--md-sys-typescale-display-small-line-height);
  letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
  color: var(--md-sys-color-on-background);
}

h2 {
  font-family: var(--md-sys-typescale-headline-large-font-family);
  font-size: var(--md-sys-typescale-headline-large-font-size);
  font-weight: var(--md-sys-typescale-headline-large-font-weight);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
  color: var(--md-sys-color-on-background);
}

h3 {
  font-family: var(--md-sys-typescale-headline-medium-font-family);
  font-size: var(--md-sys-typescale-headline-medium-font-size);
  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
  color: var(--md-sys-color-on-background);
}

h4 {
  font-family: var(--md-sys-typescale-headline-small-font-family);
  font-size: var(--md-sys-typescale-headline-small-font-size);
  font-weight: var(--md-sys-typescale-headline-small-font-weight);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
  color: var(--md-sys-color-on-background);
}

h5 {
  font-family: var(--md-sys-typescale-title-large-font-family);
  font-size: var(--md-sys-typescale-title-large-font-size);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
  line-height: var(--md-sys-typescale-title-large-line-height);
  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
  color: var(--md-sys-color-on-background);
}

h6 {
  font-family: var(--md-sys-typescale-title-medium-font-family);
  font-size: var(--md-sys-typescale-title-medium-font-size);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
  color: var(--md-sys-color-on-background);
}

/* Paragraphs */

p {
  font-family: var(--md-sys-typescale-body-medium-font-family);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
  color: var(--md-sys-color-on-surface);
}

/* Small text */

small {
  font-family: var(--md-sys-typescale-body-small-font-family);
  font-size: var(--md-sys-typescale-body-small-font-size);
  font-weight: var(--md-sys-typescale-body-small-font-weight);
  line-height: var(--md-sys-typescale-body-small-line-height);
  letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
  color: var(--md-sys-color-on-surface-variant);
}

/* Links */

a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
  transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

a:hover {
  color: var(--md-sys-color-on-primary-container);
}

a:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* Strong and bold */

strong,
b {
  font-weight: var(--font-bold);
}

/* Emphasis */

em,
i {
  font-style: italic;
}

/* Code */

code,
kbd,
samp,
pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
}

/* Blockquotes */

blockquote {
  border-left: 4px solid var(--md-sys-color-primary);
  padding-left: var(--md-sys-spacing-4);
  margin: var(--md-sys-spacing-4) 0;
  font-style: italic;
  color: var(--md-sys-color-on-surface-variant);
}

/* Lists */

ul,
ol {
  padding-left: var(--md-sys-spacing-6);
  color: var(--md-sys-color-on-surface);
}

li {
  margin-bottom: var(--md-sys-spacing-1);
}

/* ==================== GLOBAL STYLES ==================== */

html {
  font-size: 16px;
  background-color: var(--md-sys-color-background);
}

body {
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
}

/* ==================== ACCESSIBILITY ==================== */

/* Focus visible styles */

:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  border-radius: var(--md-sys-shape-corner-small);
}

/* Skip to content link */

.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  text-decoration: none;
  border-radius: var(--md-sys-shape-corner-small);
  z-index: 100;
}

.skip-to-content:focus {
  top: 0;
}

/* Screen reader only */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==================== UTILITY CLASSES ==================== */

/* Display utilities */

.md-block { display: block; }

.md-inline { display: inline; }

.md-inline-block { display: inline-block; }

.md-flex { display: flex; }

.md-inline-flex { display: inline-flex; }

.md-grid { display: grid; }

.md-hidden { display: none; }

/* Flex utilities */

.md-flex-row { flex-direction: row; }

.md-flex-column { flex-direction: column; }

.md-flex-wrap { flex-wrap: wrap; }

.md-flex-nowrap { flex-wrap: nowrap; }

.md-justify-start { justify-content: flex-start; }

.md-justify-end { justify-content: flex-end; }

.md-justify-center { justify-content: center; }

.md-justify-between { justify-content: space-between; }

.md-justify-around { justify-content: space-around; }

.md-align-start { align-items: flex-start; }

.md-align-end { align-items: flex-end; }

.md-align-center { align-items: center; }

.md-align-stretch { align-items: stretch; }

/* Text alignment */

.md-text-left { text-align: left; }

.md-text-center { text-align: center; }

.md-text-right { text-align: right; }

.md-text-justify { text-align: justify; }

/* Text transform */

.md-text-uppercase { text-transform: uppercase; }

.md-text-lowercase { text-transform: lowercase; }

.md-text-capitalize { text-transform: capitalize; }

.md-text-none { text-transform: none; }

/* Font weight */

.md-font-normal { font-weight: var(--font-normal); }

.md-font-medium { font-weight: var(--font-medium); }

.md-font-semibold { font-weight: var(--font-semibold); }

.md-font-bold { font-weight: var(--font-bold); }

/* Text overflow */

.md-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-text-wrap {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Visibility */

.md-visible { visibility: visible; }

.md-invisible { visibility: hidden; }

/* Position */

.md-relative { position: relative; }

.md-absolute { position: absolute; }

.md-fixed { position: fixed; }

.md-sticky { position: sticky; }

/* Width */

.md-w-full { width: 100%; }

.md-w-auto { width: auto; }

/* Height */

.md-h-full { height: 100%; }

.md-h-auto { height: auto; }

/* Overflow */

.md-overflow-auto { overflow: auto; }

.md-overflow-hidden { overflow: hidden; }

.md-overflow-visible { overflow: visible; }

.md-overflow-scroll { overflow: scroll; }

/* Pointer events */

.md-pointer-events-none { pointer-events: none; }

.md-pointer-events-auto { pointer-events: auto; }

/* Cursor */

.md-cursor-pointer { cursor: pointer; }

.md-cursor-default { cursor: default; }

.md-cursor-not-allowed { cursor: not-allowed; }

/* User select */

.md-select-none { user-select: none; }

.md-select-text { user-select: text; }

.md-select-all { user-select: all; }

/* ==================== SURFACE CONTAINERS ==================== */

.md-surface {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

.md-surface-variant {
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
}

.md-surface-container-lowest {
  background-color: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
}

.md-surface-container-low {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}

.md-surface-container {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

.md-surface-container-high {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}

.md-surface-container-highest {
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
}

/* ==================== COLOR UTILITIES ==================== */

.md-color-primary {
  color: var(--md-sys-color-primary);
}

.md-color-secondary {
  color: var(--md-sys-color-secondary);
}

.md-color-tertiary {
  color: var(--md-sys-color-tertiary);
}

.md-color-error {
  color: var(--md-sys-color-error);
}

.md-color-success {
  color: var(--md-sys-color-success);
}

.md-bg-primary {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.md-bg-secondary {
  background-color: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}

.md-bg-tertiary {
  background-color: var(--md-sys-color-tertiary);
  color: var(--md-sys-color-on-tertiary);
}

.md-bg-error {
  background-color: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

.md-bg-success {
  background-color: var(--md-sys-color-success);
  color: var(--md-sys-color-on-success);
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */

/* GPU acceleration for frequently animated elements */

.md-gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Contain layout for better performance */

.md-contain-layout {
  contain: layout;
}

.md-contain-paint {
  contain: paint;
}

.md-contain-content {
  contain: content;
}

/* ==================== RESPONSIVE HELPERS ==================== */

@media (max-width: 599px) {
  .md-hide-on-mobile {
    display: none !important;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .md-hide-on-tablet {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .md-hide-on-desktop {
    display: none !important;
  }
}

@media (max-width: 599px) {
  .md-show-on-mobile {
    display: block !important;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .md-show-on-tablet {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .md-show-on-desktop {
    display: block !important;
  }
}
/**
 * Material Design 3 - Design Tokens Index
 *
 * This file imports all MD3 design tokens in the correct order.
 * Import this file in your main stylesheet to use MD3 tokens.
 *
 * Usage:
 * @import './tokens/index.css';
 */

/* Import design tokens in order */

/**
 * Material Design 3 - Color System
 * https://m3.material.io/styles/color/system
 *
 * MD3 uses a dynamic color system based on color roles.
 * Each role has specific semantic meaning and usage.
 */

:root {
  /* ==================== PRIMARY COLOR ROLES ==================== */
  /* Used for key components like FABs, prominent buttons, active states */
  --md-sys-color-primary: #2E5BFF;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #E0E7FF;
  --md-sys-color-on-primary-container: #001849;

  /* ==================== SECONDARY COLOR ROLES ==================== */
  /* Used for less prominent components like filter chips, expanding FABs */
  --md-sys-color-secondary: #00D4AA;
  --md-sys-color-on-secondary: #003828;
  --md-sys-color-secondary-container: #B3F0E0;
  --md-sys-color-on-secondary-container: #002117;

  /* ==================== TERTIARY COLOR ROLES ==================== */
  /* Used to balance primary and secondary colors, or bring heightened attention */
  --md-sys-color-tertiary: #7B61FF;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #E8DDFF;
  --md-sys-color-on-tertiary-container: #1D0062;

  /* ==================== ERROR COLOR ROLES ==================== */
  /* Used for errors in components such as text fields */
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  /* ==================== SUCCESS COLOR (Custom, not in MD3 spec) ==================== */
  --md-sys-color-success: #00C48C;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #B3F0DD;
  --md-sys-color-on-success-container: #002117;

  /* ==================== WARNING COLOR (Custom, not in MD3 spec) ==================== */
  --md-sys-color-warning: #FFA755;
  --md-sys-color-on-warning: #442B00;
  --md-sys-color-warning-container: #FFDDB3;
  --md-sys-color-on-warning-container: #2A1800;

  /* ==================== SURFACE COLOR ROLES ==================== */
  /* Background colors for components */
  --md-sys-color-surface: #FEFBFF;
  --md-sys-color-on-surface: #1B1B1F;
  --md-sys-color-surface-variant: #E1E2EC;
  --md-sys-color-on-surface-variant: #44464F;

  /* Surface containers - different elevation levels */
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F6F6FA;
  --md-sys-color-surface-container: #F0F0F4;
  --md-sys-color-surface-container-high: #EAEAEE;
  --md-sys-color-surface-container-highest: #E4E5E9;

  /* ==================== BACKGROUND COLOR ROLES ==================== */
  --md-sys-color-background: #FEFBFF;
  --md-sys-color-on-background: #1B1B1F;

  /* ==================== OUTLINE COLOR ROLES ==================== */
  /* Used for borders and dividers */
  --md-sys-color-outline: #74777F;
  --md-sys-color-outline-variant: #C4C6D0;

  /* ==================== INVERSE COLOR ROLES ==================== */
  /* Used for inverse surfaces (e.g., snackbars) */
  --md-sys-color-inverse-surface: #303033;
  --md-sys-color-inverse-on-surface: #F2F0F4;
  --md-sys-color-inverse-primary: #BBC3FF;

  /* ==================== SCRIM ==================== */
  /* Used for overlays */
  --md-sys-color-scrim: #000000;

  /* ==================== SHADOW ==================== */
  /* Used for elevation shadows */
  --md-sys-color-shadow: #000000;

  /* ==================== LEGACY COMPATIBILITY (to be deprecated) ==================== */
  /* Keep these for backward compatibility, but prefer MD3 roles above */
  --color-primary: var(--md-sys-color-primary);
  --color-primary-dark: #1A3FCC;
  --color-primary-light: #5C7FFF;
  --color-secondary: var(--md-sys-color-secondary);
  --color-white: #FFFFFF;
  --color-dark: #1A1F36;
}

/* ==================== DARK THEME ==================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Primary */
    --md-sys-color-primary: #BBC3FF;
    --md-sys-color-on-primary: #002787;
    --md-sys-color-primary-container: #1842C4;
    --md-sys-color-on-primary-container: #E0E7FF;

    /* Secondary */
    --md-sys-color-secondary: #6FDDC0;
    --md-sys-color-on-secondary: #00513C;
    --md-sys-color-secondary-container: #007556;
    --md-sys-color-on-secondary-container: #B3F0E0;

    /* Tertiary */
    --md-sys-color-tertiary: #CFC0FF;
    --md-sys-color-on-tertiary: #380094;
    --md-sys-color-tertiary-container: #5331D4;
    --md-sys-color-on-tertiary-container: #E8DDFF;

    /* Error */
    --md-sys-color-error: #FFB4AB;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000A;
    --md-sys-color-on-error-container: #FFDAD6;

    /* Success */
    --md-sys-color-success: #6FDDC0;
    --md-sys-color-on-success: #00513C;
    --md-sys-color-success-container: #007556;
    --md-sys-color-on-success-container: #B3F0DD;

    /* Warning */
    --md-sys-color-warning: #FFB871;
    --md-sys-color-on-warning: #482A00;
    --md-sys-color-warning-container: #664100;
    --md-sys-color-on-warning-container: #FFDDB3;

    /* Surface */
    --md-sys-color-surface: #1B1B1F;
    --md-sys-color-on-surface: #E4E1E6;
    --md-sys-color-surface-variant: #44464F;
    --md-sys-color-on-surface-variant: #C4C6D0;

    /* Surface containers */
    --md-sys-color-surface-container-lowest: #0F0F13;
    --md-sys-color-surface-container-low: #1B1B1F;
    --md-sys-color-surface-container: #1F1F23;
    --md-sys-color-surface-container-high: #292A2D;
    --md-sys-color-surface-container-highest: #343538;

    /* Background */
    --md-sys-color-background: #1B1B1F;
    --md-sys-color-on-background: #E4E1E6;

    /* Outline */
    --md-sys-color-outline: #8E9099;
    --md-sys-color-outline-variant: #44464F;

    /* Inverse */
    --md-sys-color-inverse-surface: #E4E1E6;
    --md-sys-color-inverse-on-surface: #303033;
    --md-sys-color-inverse-primary: #2E5BFF;

    /* Scrim */
    --md-sys-color-scrim: #000000;

    /* Shadow */
    --md-sys-color-shadow: #000000;
  }
}

/* ==================== STATE LAYER OPACITIES ==================== */

/* MD3 defines specific opacity values for interaction states */

:root {
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;
}

/**
 * Material Design 3 - Typography System
 * https://m3.material.io/styles/typography/type-scale-tokens
 *
 * MD3 defines 5 typographic roles with 3 sizes each (15 total styles):
 * - Display (Large, Medium, Small)
 * - Headline (Large, Medium, Small)
 * - Title (Large, Medium, Small)
 * - Body (Large, Medium, Small)
 * - Label (Large, Medium, Small)
 */

:root {
  /* ==================== FONT FAMILIES ==================== */
  --md-sys-typescale-font-family-brand: 'Poppins', system-ui, -apple-system, sans-serif;
  --md-sys-typescale-font-family-plain: 'Inter', system-ui, -apple-system, sans-serif;

  /* ==================== DISPLAY STYLES ==================== */
  /* Large, expressive typography for marketing or showcase content */

  /* Display Large - 57px / 3.5625rem */
  --md-sys-typescale-display-large-font-family: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-display-large-font-size: 3.5625rem;
  --md-sys-typescale-display-large-font-weight: 400;
  --md-sys-typescale-display-large-line-height: 4rem;
  --md-sys-typescale-display-large-letter-spacing: -0.25px;

  /* Display Medium - 45px / 2.8125rem */
  --md-sys-typescale-display-medium-font-family: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-display-medium-font-size: 2.8125rem;
  --md-sys-typescale-display-medium-font-weight: 400;
  --md-sys-typescale-display-medium-line-height: 3.25rem;
  --md-sys-typescale-display-medium-letter-spacing: 0;

  /* Display Small - 36px / 2.25rem */
  --md-sys-typescale-display-small-font-family: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-display-small-font-size: 2.25rem;
  --md-sys-typescale-display-small-font-weight: 400;
  --md-sys-typescale-display-small-line-height: 2.75rem;
  --md-sys-typescale-display-small-letter-spacing: 0;

  /* ==================== HEADLINE STYLES ==================== */
  /* High-emphasis text for short, important content */

  /* Headline Large - 32px / 2rem */
  --md-sys-typescale-headline-large-font-family: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-headline-large-font-size: 2rem;
  --md-sys-typescale-headline-large-font-weight: 600;
  --md-sys-typescale-headline-large-line-height: 2.5rem;
  --md-sys-typescale-headline-large-letter-spacing: 0;

  /* Headline Medium - 28px / 1.75rem */
  --md-sys-typescale-headline-medium-font-family: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-headline-medium-font-size: 1.75rem;
  --md-sys-typescale-headline-medium-font-weight: 600;
  --md-sys-typescale-headline-medium-line-height: 2.25rem;
  --md-sys-typescale-headline-medium-letter-spacing: 0;

  /* Headline Small - 24px / 1.5rem */
  --md-sys-typescale-headline-small-font-family: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-headline-small-font-size: 1.5rem;
  --md-sys-typescale-headline-small-font-weight: 600;
  --md-sys-typescale-headline-small-line-height: 2rem;
  --md-sys-typescale-headline-small-letter-spacing: 0;

  /* ==================== TITLE STYLES ==================== */
  /* Medium-emphasis text for longer content */

  /* Title Large - 22px / 1.375rem */
  --md-sys-typescale-title-large-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-title-large-font-size: 1.375rem;
  --md-sys-typescale-title-large-font-weight: 500;
  --md-sys-typescale-title-large-line-height: 1.75rem;
  --md-sys-typescale-title-large-letter-spacing: 0;

  /* Title Medium - 16px / 1rem */
  --md-sys-typescale-title-medium-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-title-medium-font-size: 1rem;
  --md-sys-typescale-title-medium-font-weight: 500;
  --md-sys-typescale-title-medium-line-height: 1.5rem;
  --md-sys-typescale-title-medium-letter-spacing: 0.15px;

  /* Title Small - 14px / 0.875rem */
  --md-sys-typescale-title-small-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-title-small-font-size: 0.875rem;
  --md-sys-typescale-title-small-font-weight: 500;
  --md-sys-typescale-title-small-line-height: 1.25rem;
  --md-sys-typescale-title-small-letter-spacing: 0.1px;

  /* ==================== BODY STYLES ==================== */
  /* Body text for longer passages of text */

  /* Body Large - 16px / 1rem */
  --md-sys-typescale-body-large-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-body-large-font-size: 1rem;
  --md-sys-typescale-body-large-font-weight: 400;
  --md-sys-typescale-body-large-line-height: 1.5rem;
  --md-sys-typescale-body-large-letter-spacing: 0.5px;

  /* Body Medium - 14px / 0.875rem */
  --md-sys-typescale-body-medium-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-body-medium-font-size: 0.875rem;
  --md-sys-typescale-body-medium-font-weight: 400;
  --md-sys-typescale-body-medium-line-height: 1.25rem;
  --md-sys-typescale-body-medium-letter-spacing: 0.25px;

  /* Body Small - 12px / 0.75rem */
  --md-sys-typescale-body-small-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-body-small-font-size: 0.75rem;
  --md-sys-typescale-body-small-font-weight: 400;
  --md-sys-typescale-body-small-line-height: 1rem;
  --md-sys-typescale-body-small-letter-spacing: 0.4px;

  /* ==================== LABEL STYLES ==================== */
  /* Small text used in components like buttons, tabs, chips */

  /* Label Large - 14px / 0.875rem */
  --md-sys-typescale-label-large-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-label-large-font-size: 0.875rem;
  --md-sys-typescale-label-large-font-weight: 500;
  --md-sys-typescale-label-large-line-height: 1.25rem;
  --md-sys-typescale-label-large-letter-spacing: 0.1px;

  /* Label Medium - 12px / 0.75rem */
  --md-sys-typescale-label-medium-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-label-medium-font-size: 0.75rem;
  --md-sys-typescale-label-medium-font-weight: 500;
  --md-sys-typescale-label-medium-line-height: 1rem;
  --md-sys-typescale-label-medium-letter-spacing: 0.5px;

  /* Label Small - 11px / 0.6875rem */
  --md-sys-typescale-label-small-font-family: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-label-small-font-size: 0.6875rem;
  --md-sys-typescale-label-small-font-weight: 500;
  --md-sys-typescale-label-small-line-height: 1rem;
  --md-sys-typescale-label-small-letter-spacing: 0.5px;

  /* ==================== LEGACY COMPATIBILITY ==================== */
  /* Map old variables to MD3 equivalents for gradual migration */
  --font-primary: var(--md-sys-typescale-font-family-plain);
  --font-heading: var(--md-sys-typescale-font-family-brand);

  /* Legacy font sizes - map to closest MD3 equivalent */
  --text-xs: var(--md-sys-typescale-label-small-font-size);
  --text-sm: var(--md-sys-typescale-body-small-font-size);
  --text-base: var(--md-sys-typescale-body-large-font-size);
  --text-lg: var(--md-sys-typescale-title-large-font-size);
  --text-xl: var(--md-sys-typescale-headline-small-font-size);
  --text-2xl: var(--md-sys-typescale-headline-medium-font-size);
  --text-3xl: var(--md-sys-typescale-headline-large-font-size);
  --text-4xl: var(--md-sys-typescale-display-small-font-size);
  --text-5xl: var(--md-sys-typescale-display-medium-font-size);
  --text-6xl: var(--md-sys-typescale-display-large-font-size);

  /* Legacy font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
}

/* ==================== UTILITY CLASSES ==================== */

/* Pre-built classes for common typography styles */

.md-typescale-display-large {
  font-family: var(--md-sys-typescale-display-large-font-family);
  font-size: var(--md-sys-typescale-display-large-font-size);
  font-weight: var(--md-sys-typescale-display-large-font-weight);
  line-height: var(--md-sys-typescale-display-large-line-height);
  letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
}

.md-typescale-display-medium {
  font-family: var(--md-sys-typescale-display-medium-font-family);
  font-size: var(--md-sys-typescale-display-medium-font-size);
  font-weight: var(--md-sys-typescale-display-medium-font-weight);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
}

.md-typescale-display-small {
  font-family: var(--md-sys-typescale-display-small-font-family);
  font-size: var(--md-sys-typescale-display-small-font-size);
  font-weight: var(--md-sys-typescale-display-small-font-weight);
  line-height: var(--md-sys-typescale-display-small-line-height);
  letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
}

.md-typescale-headline-large {
  font-family: var(--md-sys-typescale-headline-large-font-family);
  font-size: var(--md-sys-typescale-headline-large-font-size);
  font-weight: var(--md-sys-typescale-headline-large-font-weight);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
}

.md-typescale-headline-medium {
  font-family: var(--md-sys-typescale-headline-medium-font-family);
  font-size: var(--md-sys-typescale-headline-medium-font-size);
  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
}

.md-typescale-headline-small {
  font-family: var(--md-sys-typescale-headline-small-font-family);
  font-size: var(--md-sys-typescale-headline-small-font-size);
  font-weight: var(--md-sys-typescale-headline-small-font-weight);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
}

.md-typescale-title-large {
  font-family: var(--md-sys-typescale-title-large-font-family);
  font-size: var(--md-sys-typescale-title-large-font-size);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
  line-height: var(--md-sys-typescale-title-large-line-height);
  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
}

.md-typescale-title-medium {
  font-family: var(--md-sys-typescale-title-medium-font-family);
  font-size: var(--md-sys-typescale-title-medium-font-size);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
}

.md-typescale-title-small {
  font-family: var(--md-sys-typescale-title-small-font-family);
  font-size: var(--md-sys-typescale-title-small-font-size);
  font-weight: var(--md-sys-typescale-title-small-font-weight);
  line-height: var(--md-sys-typescale-title-small-line-height);
  letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
}

.md-typescale-body-large {
  font-family: var(--md-sys-typescale-body-large-font-family);
  font-size: var(--md-sys-typescale-body-large-font-size);
  font-weight: var(--md-sys-typescale-body-large-font-weight);
  line-height: var(--md-sys-typescale-body-large-line-height);
  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
}

.md-typescale-body-medium {
  font-family: var(--md-sys-typescale-body-medium-font-family);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
}

.md-typescale-body-small {
  font-family: var(--md-sys-typescale-body-small-font-family);
  font-size: var(--md-sys-typescale-body-small-font-size);
  font-weight: var(--md-sys-typescale-body-small-font-weight);
  line-height: var(--md-sys-typescale-body-small-line-height);
  letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
}

.md-typescale-label-large {
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  line-height: var(--md-sys-typescale-label-large-line-height);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
}

.md-typescale-label-medium {
  font-family: var(--md-sys-typescale-label-medium-font-family);
  font-size: var(--md-sys-typescale-label-medium-font-size);
  font-weight: var(--md-sys-typescale-label-medium-font-weight);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
}

.md-typescale-label-small {
  font-family: var(--md-sys-typescale-label-small-font-family);
  font-size: var(--md-sys-typescale-label-small-font-size);
  font-weight: var(--md-sys-typescale-label-small-font-weight);
  line-height: var(--md-sys-typescale-label-small-line-height);
  letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
}

/**
 * Material Design 3 - Elevation System
 * https://m3.material.io/styles/elevation/tokens
 *
 * MD3 uses elevation levels 0-5 to express hierarchy and focus.
 * Elevation is expressed through shadow and surface tint (in dark theme).
 */

:root {
  /* ==================== ELEVATION SHADOWS ==================== */
  /* Level 0 - No elevation */
  --md-sys-elevation-level0: none;

  /* Level 1 - Slightly raised (e.g., filled buttons at rest, cards at rest) */
  --md-sys-elevation-level1:
    0px 1px 2px 0px rgba(0, 0, 0, 0.30),
    0px 1px 3px 1px rgba(0, 0, 0, 0.15);

  /* Level 2 - Elevated (e.g., filled buttons on hover, cards on hover) */
  --md-sys-elevation-level2:
    0px 1px 2px 0px rgba(0, 0, 0, 0.30),
    0px 2px 6px 2px rgba(0, 0, 0, 0.15);

  /* Level 3 - Modal surfaces (e.g., dialogs, pickers, menus) */
  --md-sys-elevation-level3:
    0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px 0px rgba(0, 0, 0, 0.30);

  /* Level 4 - Floating action buttons, navigation drawer */
  --md-sys-elevation-level4:
    0px 6px 10px 4px rgba(0, 0, 0, 0.15),
    0px 2px 3px 0px rgba(0, 0, 0, 0.30);

  /* Level 5 - Top app bar in scroll state, nav bar */
  --md-sys-elevation-level5:
    0px 8px 12px 6px rgba(0, 0, 0, 0.15),
    0px 4px 4px 0px rgba(0, 0, 0, 0.30);

  /* ==================== SURFACE TINT (for dark theme) ==================== */
  /* MD3 uses surface tint overlay in dark theme instead of just shadows */
  --md-sys-elevation-surface-tint-layer-1: rgba(var(--md-sys-color-primary-rgb), 0.05);
  --md-sys-elevation-surface-tint-layer-2: rgba(var(--md-sys-color-primary-rgb), 0.08);
  --md-sys-elevation-surface-tint-layer-3: rgba(var(--md-sys-color-primary-rgb), 0.11);
  --md-sys-elevation-surface-tint-layer-4: rgba(var(--md-sys-color-primary-rgb), 0.12);
  --md-sys-elevation-surface-tint-layer-5: rgba(var(--md-sys-color-primary-rgb), 0.14);

  /* Primary color in RGB format for tint calculations */
  --md-sys-color-primary-rgb: 46, 91, 255;

  /* ==================== LEGACY COMPATIBILITY ==================== */
  /* Map old shadow variables to MD3 levels */
  --shadow-xs: var(--md-sys-elevation-level0);
  --shadow-sm: var(--md-sys-elevation-level1);
  --shadow-md: var(--md-sys-elevation-level2);
  --shadow-lg: var(--md-sys-elevation-level3);
  --shadow-xl: var(--md-sys-elevation-level4);
}

/* ==================== DARK THEME ELEVATION ==================== */

/* In dark theme, use surface tint overlays */

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary-rgb: 187, 195, 255; /* Lighter primary for dark theme */
  }
}

/* ==================== UTILITY CLASSES ==================== */

/* Pre-built classes for common elevation levels */

.md-elevation-0 {
  box-shadow: var(--md-sys-elevation-level0);
}

.md-elevation-1 {
  box-shadow: var(--md-sys-elevation-level1);
}

.md-elevation-2 {
  box-shadow: var(--md-sys-elevation-level2);
}

.md-elevation-3 {
  box-shadow: var(--md-sys-elevation-level3);
}

.md-elevation-4 {
  box-shadow: var(--md-sys-elevation-level4);
}

.md-elevation-5 {
  box-shadow: var(--md-sys-elevation-level5);
}

/* Elevation with transitions for interactive elements */

.md-elevation-transition {
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== COMPONENT-SPECIFIC ELEVATION ==================== */

/* Buttons */

.md-elevation-button-resting {
  box-shadow: var(--md-sys-elevation-level0);
}

.md-elevation-button-hover {
  box-shadow: var(--md-sys-elevation-level1);
}

.md-elevation-button-pressed {
  box-shadow: var(--md-sys-elevation-level0);
}

/* Cards */

.md-elevation-card-resting {
  box-shadow: var(--md-sys-elevation-level1);
}

.md-elevation-card-hover {
  box-shadow: var(--md-sys-elevation-level2);
}

.md-elevation-card-dragged {
  box-shadow: var(--md-sys-elevation-level4);
}

/* FAB (Floating Action Button) */

.md-elevation-fab-resting {
  box-shadow: var(--md-sys-elevation-level3);
}

.md-elevation-fab-hover {
  box-shadow: var(--md-sys-elevation-level4);
}

.md-elevation-fab-pressed {
  box-shadow: var(--md-sys-elevation-level3);
}

/* Dialogs & Modals */

.md-elevation-dialog {
  box-shadow: var(--md-sys-elevation-level3);
}

/* Navigation Drawer */

.md-elevation-nav-drawer {
  box-shadow: var(--md-sys-elevation-level0);
}

.md-elevation-nav-drawer-modal {
  box-shadow: var(--md-sys-elevation-level1);
}

/* Top App Bar */

.md-elevation-app-bar-resting {
  box-shadow: var(--md-sys-elevation-level0);
}

.md-elevation-app-bar-scrolled {
  box-shadow: var(--md-sys-elevation-level2);
}

/* Menus & Dropdowns */

.md-elevation-menu {
  box-shadow: var(--md-sys-elevation-level2);
}

/* ==================== PERFORMANCE OPTIMIZATION ==================== */

/* Use will-change for elements that frequently change elevation */

.md-elevation-will-change {
  will-change: box-shadow;
}

/* Use GPU acceleration for elevation transitions */

.md-elevation-gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/**
 * Material Design 3 - Spacing System
 * https://m3.material.io/foundations/layout/applying-layout/spacing
 *
 * MD3 uses a 4px base grid system for consistent spacing.
 * All spacing should be multiples of 4px for visual harmony.
 */

:root {
  /* ==================== BASE GRID ==================== */
  --md-sys-spacing-base: 4px;

  /* ==================== SPACING SCALE ==================== */
  /* Following 4px base grid: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96 */

  --md-sys-spacing-0: 0px;
  --md-sys-spacing-1: 4px;    /* 1 × base */
  --md-sys-spacing-2: 8px;    /* 2 × base */
  --md-sys-spacing-3: 12px;   /* 3 × base */
  --md-sys-spacing-4: 16px;   /* 4 × base */
  --md-sys-spacing-5: 20px;   /* 5 × base */
  --md-sys-spacing-6: 24px;   /* 6 × base */
  --md-sys-spacing-8: 32px;   /* 8 × base */
  --md-sys-spacing-10: 40px;  /* 10 × base */
  --md-sys-spacing-12: 48px;  /* 12 × base */
  --md-sys-spacing-16: 64px;  /* 16 × base */
  --md-sys-spacing-20: 80px;  /* 20 × base */
  --md-sys-spacing-24: 96px;  /* 24 × base */
  --md-sys-spacing-32: 128px; /* 32 × base */

  /* ==================== SEMANTIC SPACING ==================== */
  /* Named spacing for common use cases */

  /* Compact spacing for dense layouts */
  --md-sys-spacing-compact-xs: var(--md-sys-spacing-1);
  --md-sys-spacing-compact-sm: var(--md-sys-spacing-2);
  --md-sys-spacing-compact-md: var(--md-sys-spacing-3);
  --md-sys-spacing-compact-lg: var(--md-sys-spacing-4);

  /* Standard spacing for normal layouts */
  --md-sys-spacing-standard-xs: var(--md-sys-spacing-2);
  --md-sys-spacing-standard-sm: var(--md-sys-spacing-4);
  --md-sys-spacing-standard-md: var(--md-sys-spacing-6);
  --md-sys-spacing-standard-lg: var(--md-sys-spacing-8);
  --md-sys-spacing-standard-xl: var(--md-sys-spacing-12);

  /* Spacious spacing for comfortable layouts */
  --md-sys-spacing-spacious-xs: var(--md-sys-spacing-4);
  --md-sys-spacing-spacious-sm: var(--md-sys-spacing-6);
  --md-sys-spacing-spacious-md: var(--md-sys-spacing-8);
  --md-sys-spacing-spacious-lg: var(--md-sys-spacing-12);
  --md-sys-spacing-spacious-xl: var(--md-sys-spacing-16);

  /* ==================== COMPONENT SPACING ==================== */
  /* Specific spacing values for common components */

  /* Buttons */
  --md-sys-spacing-button-padding-horizontal: var(--md-sys-spacing-6);
  --md-sys-spacing-button-padding-vertical: var(--md-sys-spacing-2);
  --md-sys-spacing-button-gap: var(--md-sys-spacing-2);

  /* Cards */
  --md-sys-spacing-card-padding: var(--md-sys-spacing-6);
  --md-sys-spacing-card-gap: var(--md-sys-spacing-4);

  /* Forms */
  --md-sys-spacing-form-field-gap: var(--md-sys-spacing-4);
  --md-sys-spacing-form-section-gap: var(--md-sys-spacing-8);

  /* Lists */
  --md-sys-spacing-list-item-padding: var(--md-sys-spacing-4);
  --md-sys-spacing-list-item-gap: var(--md-sys-spacing-2);

  /* Dialogs */
  --md-sys-spacing-dialog-padding: var(--md-sys-spacing-6);
  --md-sys-spacing-dialog-title-padding: var(--md-sys-spacing-6);
  --md-sys-spacing-dialog-content-padding: var(--md-sys-spacing-6);
  --md-sys-spacing-dialog-actions-padding: var(--md-sys-spacing-6);

  /* Navigation */
  --md-sys-spacing-nav-item-padding: var(--md-sys-spacing-4);
  --md-sys-spacing-nav-item-gap: var(--md-sys-spacing-1);

  /* Chips */
  --md-sys-spacing-chip-padding-horizontal: var(--md-sys-spacing-4);
  --md-sys-spacing-chip-padding-vertical: var(--md-sys-spacing-2);
  --md-sys-spacing-chip-gap: var(--md-sys-spacing-2);

  /* ==================== LAYOUT SPACING ==================== */
  /* Container and section spacing */

  --md-sys-spacing-container-padding-mobile: var(--md-sys-spacing-4);
  --md-sys-spacing-container-padding-tablet: var(--md-sys-spacing-6);
  --md-sys-spacing-container-padding-desktop: var(--md-sys-spacing-8);

  --md-sys-spacing-section-gap-mobile: var(--md-sys-spacing-12);
  --md-sys-spacing-section-gap-tablet: var(--md-sys-spacing-16);
  --md-sys-spacing-section-gap-desktop: var(--md-sys-spacing-20);

  /* ==================== LEGACY COMPATIBILITY ==================== */
  /* Map old spacing variables to MD3 equivalents */

  --space-xs: var(--md-sys-spacing-1);
  --space-sm: var(--md-sys-spacing-2);
  --space-md: var(--md-sys-spacing-4);
  --space-lg: var(--md-sys-spacing-6);
  --space-xl: var(--md-sys-spacing-8);
  --space-2xl: var(--md-sys-spacing-12);
  --space-3xl: var(--md-sys-spacing-16);
  --space-4xl: var(--md-sys-spacing-24);

  /* Responsive spacing variables */
  --spacing-xs: var(--md-sys-spacing-1);
  --spacing-sm: var(--md-sys-spacing-2);
  --spacing-md: var(--md-sys-spacing-4);
  --spacing-lg: var(--md-sys-spacing-6);
  --spacing-xl: var(--md-sys-spacing-8);
  --spacing-xxl: var(--md-sys-spacing-12);
  --spacing-xxxl: var(--md-sys-spacing-16);
}

/* ==================== UTILITY CLASSES ==================== */

/* Spacing utility classes for rapid prototyping */

/* Margin utilities */

.md-m-0 { margin: var(--md-sys-spacing-0); }

.md-m-1 { margin: var(--md-sys-spacing-1); }

.md-m-2 { margin: var(--md-sys-spacing-2); }

.md-m-3 { margin: var(--md-sys-spacing-3); }

.md-m-4 { margin: var(--md-sys-spacing-4); }

.md-m-5 { margin: var(--md-sys-spacing-5); }

.md-m-6 { margin: var(--md-sys-spacing-6); }

.md-m-8 { margin: var(--md-sys-spacing-8); }

.md-m-10 { margin: var(--md-sys-spacing-10); }

.md-m-12 { margin: var(--md-sys-spacing-12); }

/* Margin top */

.md-mt-0 { margin-top: var(--md-sys-spacing-0); }

.md-mt-1 { margin-top: var(--md-sys-spacing-1); }

.md-mt-2 { margin-top: var(--md-sys-spacing-2); }

.md-mt-3 { margin-top: var(--md-sys-spacing-3); }

.md-mt-4 { margin-top: var(--md-sys-spacing-4); }

.md-mt-5 { margin-top: var(--md-sys-spacing-5); }

.md-mt-6 { margin-top: var(--md-sys-spacing-6); }

.md-mt-8 { margin-top: var(--md-sys-spacing-8); }

.md-mt-12 { margin-top: var(--md-sys-spacing-12); }

/* Margin bottom */

.md-mb-0 { margin-bottom: var(--md-sys-spacing-0); }

.md-mb-1 { margin-bottom: var(--md-sys-spacing-1); }

.md-mb-2 { margin-bottom: var(--md-sys-spacing-2); }

.md-mb-3 { margin-bottom: var(--md-sys-spacing-3); }

.md-mb-4 { margin-bottom: var(--md-sys-spacing-4); }

.md-mb-5 { margin-bottom: var(--md-sys-spacing-5); }

.md-mb-6 { margin-bottom: var(--md-sys-spacing-6); }

.md-mb-8 { margin-bottom: var(--md-sys-spacing-8); }

.md-mb-12 { margin-bottom: var(--md-sys-spacing-12); }

/* Margin left */

.md-ml-0 { margin-left: var(--md-sys-spacing-0); }

.md-ml-1 { margin-left: var(--md-sys-spacing-1); }

.md-ml-2 { margin-left: var(--md-sys-spacing-2); }

.md-ml-3 { margin-left: var(--md-sys-spacing-3); }

.md-ml-4 { margin-left: var(--md-sys-spacing-4); }

.md-ml-6 { margin-left: var(--md-sys-spacing-6); }

/* Margin right */

.md-mr-0 { margin-right: var(--md-sys-spacing-0); }

.md-mr-1 { margin-right: var(--md-sys-spacing-1); }

.md-mr-2 { margin-right: var(--md-sys-spacing-2); }

.md-mr-3 { margin-right: var(--md-sys-spacing-3); }

.md-mr-4 { margin-right: var(--md-sys-spacing-4); }

.md-mr-6 { margin-right: var(--md-sys-spacing-6); }

/* Padding utilities */

.md-p-0 { padding: var(--md-sys-spacing-0); }

.md-p-1 { padding: var(--md-sys-spacing-1); }

.md-p-2 { padding: var(--md-sys-spacing-2); }

.md-p-3 { padding: var(--md-sys-spacing-3); }

.md-p-4 { padding: var(--md-sys-spacing-4); }

.md-p-5 { padding: var(--md-sys-spacing-5); }

.md-p-6 { padding: var(--md-sys-spacing-6); }

.md-p-8 { padding: var(--md-sys-spacing-8); }

.md-p-10 { padding: var(--md-sys-spacing-10); }

.md-p-12 { padding: var(--md-sys-spacing-12); }

/* Padding top */

.md-pt-0 { padding-top: var(--md-sys-spacing-0); }

.md-pt-1 { padding-top: var(--md-sys-spacing-1); }

.md-pt-2 { padding-top: var(--md-sys-spacing-2); }

.md-pt-3 { padding-top: var(--md-sys-spacing-3); }

.md-pt-4 { padding-top: var(--md-sys-spacing-4); }

.md-pt-6 { padding-top: var(--md-sys-spacing-6); }

.md-pt-8 { padding-top: var(--md-sys-spacing-8); }

/* Padding bottom */

.md-pb-0 { padding-bottom: var(--md-sys-spacing-0); }

.md-pb-1 { padding-bottom: var(--md-sys-spacing-1); }

.md-pb-2 { padding-bottom: var(--md-sys-spacing-2); }

.md-pb-3 { padding-bottom: var(--md-sys-spacing-3); }

.md-pb-4 { padding-bottom: var(--md-sys-spacing-4); }

.md-pb-6 { padding-bottom: var(--md-sys-spacing-6); }

.md-pb-8 { padding-bottom: var(--md-sys-spacing-8); }

/* Padding left */

.md-pl-0 { padding-left: var(--md-sys-spacing-0); }

.md-pl-1 { padding-left: var(--md-sys-spacing-1); }

.md-pl-2 { padding-left: var(--md-sys-spacing-2); }

.md-pl-3 { padding-left: var(--md-sys-spacing-3); }

.md-pl-4 { padding-left: var(--md-sys-spacing-4); }

.md-pl-6 { padding-left: var(--md-sys-spacing-6); }

/* Padding right */

.md-pr-0 { padding-right: var(--md-sys-spacing-0); }

.md-pr-1 { padding-right: var(--md-sys-spacing-1); }

.md-pr-2 { padding-right: var(--md-sys-spacing-2); }

.md-pr-3 { padding-right: var(--md-sys-spacing-3); }

.md-pr-4 { padding-right: var(--md-sys-spacing-4); }

.md-pr-6 { padding-right: var(--md-sys-spacing-6); }

/* Gap utilities (for flexbox/grid) */

.md-gap-0 { gap: var(--md-sys-spacing-0); }

.md-gap-1 { gap: var(--md-sys-spacing-1); }

.md-gap-2 { gap: var(--md-sys-spacing-2); }

.md-gap-3 { gap: var(--md-sys-spacing-3); }

.md-gap-4 { gap: var(--md-sys-spacing-4); }

.md-gap-5 { gap: var(--md-sys-spacing-5); }

.md-gap-6 { gap: var(--md-sys-spacing-6); }

.md-gap-8 { gap: var(--md-sys-spacing-8); }

.md-gap-12 { gap: var(--md-sys-spacing-12); }

/**
 * Material Design 3 - Shape System
 * https://m3.material.io/styles/shape/shape-scale-tokens
 *
 * MD3 defines a shape scale for corner radii to create visual consistency.
 * Shapes help establish hierarchy and brand expression.
 */

:root {
  /* ==================== SHAPE SCALE ==================== */
  /* MD3 defines 4 main shape families: None, Extra Small, Small, Medium, Large, Extra Large, Full */

  /* None - No rounding (0px) */
  --md-sys-shape-corner-none: 0px;

  /* Extra Small - Subtle rounding (4px) */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-extra-small-top: 4px 4px 0px 0px;

  /* Small - Small components (8px) */
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-small-top: 8px 8px 0px 0px;

  /* Medium - Cards, larger components (12px) */
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-medium-top: 12px 12px 0px 0px;

  /* Large - Navigation drawer, bottom sheets (16px) */
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-top: 16px 16px 0px 0px;
  --md-sys-shape-corner-large-end: 0px 16px 16px 0px;

  /* Extra Large - Dialogs, time pickers (28px) */
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-top: 28px 28px 0px 0px;

  /* Full - Completely rounded (9999px - pill shape) */
  --md-sys-shape-corner-full: 9999px;

  /* ==================== COMPONENT-SPECIFIC SHAPES ==================== */
  /* Specific shape values for common components per MD3 spec */

  /* Buttons */
  --md-sys-shape-button: 20px;               /* Filled, outlined, text buttons */
  --md-sys-shape-button-small: 16px;         /* Small buttons */
  --md-sys-shape-button-large: 24px;         /* Large buttons */

  /* FAB (Floating Action Button) */
  --md-sys-shape-fab-small: 12px;            /* Small FAB */
  --md-sys-shape-fab-medium: 16px;           /* Medium FAB */
  --md-sys-shape-fab-large: 28px;            /* Large FAB */
  --md-sys-shape-fab-extended: 16px;         /* Extended FAB */

  /* Cards */
  --md-sys-shape-card-elevated: 12px;        /* Elevated cards */
  --md-sys-shape-card-filled: 12px;          /* Filled cards */
  --md-sys-shape-card-outlined: 12px;        /* Outlined cards */

  /* Chips */
  --md-sys-shape-chip-assist: 8px;           /* Assist chips */
  --md-sys-shape-chip-filter: 8px;           /* Filter chips */
  --md-sys-shape-chip-input: 8px;            /* Input chips */
  --md-sys-shape-chip-suggestion: 8px;       /* Suggestion chips */

  /* Dialogs */
  --md-sys-shape-dialog: 28px;               /* Dialog containers */
  --md-sys-shape-dialog-full-screen: 0px;    /* Full-screen dialogs */

  /* Text Fields */
  --md-sys-shape-text-field-filled: 4px 4px 0px 0px;    /* Filled text field */
  --md-sys-shape-text-field-outlined: 4px;              /* Outlined text field */

  /* Menus */
  --md-sys-shape-menu: 4px;                  /* Dropdown menus */

  /* Navigation */
  --md-sys-shape-navigation-drawer: 0px 16px 16px 0px;  /* Navigation drawer */
  --md-sys-shape-navigation-rail: 0px;                  /* Navigation rail */
  --md-sys-shape-navigation-bar: 0px;                   /* Bottom navigation bar */

  /* Sheets */
  --md-sys-shape-sheet-bottom: 28px 28px 0px 0px;      /* Bottom sheets */
  --md-sys-shape-sheet-side: 0px 28px 28px 0px;        /* Side sheets */

  /* Snackbar */
  --md-sys-shape-snackbar: 4px;             /* Snackbar */

  /* Tooltip */
  --md-sys-shape-tooltip: 4px;              /* Tooltip */

  /* Switch */
  --md-sys-shape-switch: 16px;              /* Switch track */
  --md-sys-shape-switch-handle: 8px;        /* Switch handle */

  /* ==================== LEGACY COMPATIBILITY ==================== */
  /* Map old radius variables to MD3 equivalents */

  --radius-sm: var(--md-sys-shape-corner-small);
  --radius-md: var(--md-sys-shape-corner-medium);
  --radius-lg: var(--md-sys-shape-corner-large);
  --radius-xl: var(--md-sys-shape-corner-extra-large);
  --radius-full: var(--md-sys-shape-corner-full);
}

/* ==================== UTILITY CLASSES ==================== */

/* Shape utility classes for rapid prototyping */

/* Corner radius utilities */

.md-shape-none {
  border-radius: var(--md-sys-shape-corner-none);
}

.md-shape-extra-small {
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.md-shape-small {
  border-radius: var(--md-sys-shape-corner-small);
}

.md-shape-medium {
  border-radius: var(--md-sys-shape-corner-medium);
}

.md-shape-large {
  border-radius: var(--md-sys-shape-corner-large);
}

.md-shape-extra-large {
  border-radius: var(--md-sys-shape-corner-extra-large);
}

.md-shape-full {
  border-radius: var(--md-sys-shape-corner-full);
}

/* Top-only rounding */

.md-shape-extra-small-top {
  border-radius: var(--md-sys-shape-corner-extra-small-top);
}

.md-shape-small-top {
  border-radius: var(--md-sys-shape-corner-small-top);
}

.md-shape-medium-top {
  border-radius: var(--md-sys-shape-corner-medium-top);
}

.md-shape-large-top {
  border-radius: var(--md-sys-shape-corner-large-top);
}

.md-shape-extra-large-top {
  border-radius: var(--md-sys-shape-corner-extra-large-top);
}

/* End rounding (for RTL support) */

.md-shape-large-end {
  border-radius: var(--md-sys-shape-corner-large-end);
}

/* Component-specific shape classes */

.md-shape-button {
  border-radius: var(--md-sys-shape-button);
}

.md-shape-card {
  border-radius: var(--md-sys-shape-card-elevated);
}

.md-shape-chip {
  border-radius: var(--md-sys-shape-chip-assist);
}

.md-shape-dialog {
  border-radius: var(--md-sys-shape-dialog);
}

.md-shape-text-field-filled {
  border-radius: var(--md-sys-shape-text-field-filled);
}

.md-shape-text-field-outlined {
  border-radius: var(--md-sys-shape-text-field-outlined);
}

/**
 * Material Design 3 - Motion System
 * https://m3.material.io/styles/motion/easing-and-duration/tokens-specs
 *
 * MD3 defines motion tokens for duration and easing to create cohesive animations.
 * Motion helps guide user attention and provides feedback.
 */

:root {
  /* ==================== DURATION TOKENS ==================== */
  /* Short durations - Simple animations (50-200ms) */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;

  /* Medium durations - Standard animations (250-400ms) */
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;

  /* Long durations - Complex animations (450-700ms) */
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;

  /* Extra long durations - Large motion (700-1000ms) */
  --md-sys-motion-duration-extra-long1: 700ms;
  --md-sys-motion-duration-extra-long2: 800ms;
  --md-sys-motion-duration-extra-long3: 900ms;
  --md-sys-motion-duration-extra-long4: 1000ms;

  /* ==================== EASING TOKENS ==================== */
  /* MD3 defines 4 types of easing curves */

  /* Emphasized - For attention-grabbing motion (default for most animations) */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* Standard - Smooth, subtle motion */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* Legacy - For compatibility with older Material Design */
  --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-motion-easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --md-sys-motion-easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* Linear - Constant speed (use sparingly) */
  --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);

  /* ==================== COMMON MOTION PATTERNS ==================== */
  /* Pre-defined combinations for common use cases */

  /* Enter animations (elements appearing) */
  --md-sys-motion-enter-duration: var(--md-sys-motion-duration-medium2);
  --md-sys-motion-enter-easing: var(--md-sys-motion-easing-emphasized-decelerate);

  /* Exit animations (elements disappearing) */
  --md-sys-motion-exit-duration: var(--md-sys-motion-duration-short4);
  --md-sys-motion-exit-easing: var(--md-sys-motion-easing-emphasized-accelerate);

  /* Transition animations (state changes) */
  --md-sys-motion-transition-duration: var(--md-sys-motion-duration-medium2);
  --md-sys-motion-transition-easing: var(--md-sys-motion-easing-emphasized);

  /* ==================== COMPONENT-SPECIFIC MOTION ==================== */

  /* Buttons */
  --md-sys-motion-button-hover-duration: var(--md-sys-motion-duration-short2);
  --md-sys-motion-button-hover-easing: var(--md-sys-motion-easing-standard);
  --md-sys-motion-button-press-duration: var(--md-sys-motion-duration-short1);
  --md-sys-motion-button-press-easing: var(--md-sys-motion-easing-standard-accelerate);

  /* Cards */
  --md-sys-motion-card-hover-duration: var(--md-sys-motion-duration-medium2);
  --md-sys-motion-card-hover-easing: var(--md-sys-motion-easing-emphasized);

  /* Dialogs */
  --md-sys-motion-dialog-enter-duration: var(--md-sys-motion-duration-medium4);
  --md-sys-motion-dialog-enter-easing: var(--md-sys-motion-easing-emphasized-decelerate);
  --md-sys-motion-dialog-exit-duration: var(--md-sys-motion-duration-short4);
  --md-sys-motion-dialog-exit-easing: var(--md-sys-motion-easing-emphasized-accelerate);

  /* Drawers */
  --md-sys-motion-drawer-duration: var(--md-sys-motion-duration-medium4);
  --md-sys-motion-drawer-easing: var(--md-sys-motion-easing-emphasized);

  /* Snackbar */
  --md-sys-motion-snackbar-enter-duration: var(--md-sys-motion-duration-medium2);
  --md-sys-motion-snackbar-enter-easing: var(--md-sys-motion-easing-emphasized-decelerate);
  --md-sys-motion-snackbar-exit-duration: var(--md-sys-motion-duration-short3);
  --md-sys-motion-snackbar-exit-easing: var(--md-sys-motion-easing-emphasized-accelerate);

  /* FAB */
  --md-sys-motion-fab-transform-duration: var(--md-sys-motion-duration-medium2);
  --md-sys-motion-fab-transform-easing: var(--md-sys-motion-easing-emphasized);

  /* Chips */
  --md-sys-motion-chip-duration: var(--md-sys-motion-duration-short2);
  --md-sys-motion-chip-easing: var(--md-sys-motion-easing-standard);

  /* Ripple effect */
  --md-sys-motion-ripple-duration: var(--md-sys-motion-duration-medium3);
  --md-sys-motion-ripple-easing: var(--md-sys-motion-easing-standard);

  /* ==================== LEGACY COMPATIBILITY ==================== */
  /* Map old transition variables to MD3 equivalents */

  --transition-fast: var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
  --transition-base: var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
  --transition-slow: var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
}

/* ==================== UTILITY CLASSES ==================== */

/* Motion utility classes for rapid prototyping */

/* Transition all properties */

.md-motion-transition {
  transition: all var(--md-sys-motion-transition-duration) var(--md-sys-motion-transition-easing);
}

.md-motion-transition-fast {
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}

.md-motion-transition-slow {
  transition: all var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
}

/* Specific property transitions */

.md-motion-transition-transform {
  transition: transform var(--md-sys-motion-transition-duration) var(--md-sys-motion-transition-easing);
}

.md-motion-transition-opacity {
  transition: opacity var(--md-sys-motion-transition-duration) var(--md-sys-motion-transition-easing);
}

.md-motion-transition-colors {
  transition:
    background-color var(--md-sys-motion-transition-duration) var(--md-sys-motion-transition-easing),
    border-color var(--md-sys-motion-transition-duration) var(--md-sys-motion-transition-easing),
    color var(--md-sys-motion-transition-duration) var(--md-sys-motion-transition-easing);
}

/* Performance optimization - will-change */

.md-motion-will-change-transform {
  will-change: transform;
}

.md-motion-will-change-opacity {
  will-change: opacity;
}

.md-motion-will-change-auto {
  will-change: auto;
}

/* ==================== ANIMATION KEYFRAMES ==================== */

/* Common MD3 animation patterns */

/* Fade in */

@keyframes md-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.md-animation-fade-in {
  animation: md-fade-in var(--md-sys-motion-enter-duration) var(--md-sys-motion-enter-easing);
}

/* Fade out */

@keyframes md-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.md-animation-fade-out {
  animation: md-fade-out var(--md-sys-motion-exit-duration) var(--md-sys-motion-exit-easing);
}

/* Slide in from bottom */

@keyframes md-slide-in-bottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.md-animation-slide-in-bottom {
  animation: md-slide-in-bottom var(--md-sys-motion-enter-duration) var(--md-sys-motion-enter-easing);
}

/* Slide out to bottom */

@keyframes md-slide-out-bottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.md-animation-slide-out-bottom {
  animation: md-slide-out-bottom var(--md-sys-motion-exit-duration) var(--md-sys-motion-exit-easing);
}

/* Scale in */

@keyframes md-scale-in {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.md-animation-scale-in {
  animation: md-scale-in var(--md-sys-motion-enter-duration) var(--md-sys-motion-enter-easing);
}

/* Scale out */

@keyframes md-scale-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.8);
    opacity: 0;
  }
}

.md-animation-scale-out {
  animation: md-scale-out var(--md-sys-motion-exit-duration) var(--md-sys-motion-exit-easing);
}

/* Ripple effect */

@keyframes md-ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.md-animation-ripple {
  animation: md-ripple var(--md-sys-motion-ripple-duration) var(--md-sys-motion-ripple-easing);
}

/* ==================== REDUCED MOTION ==================== */

/* Respect user preferences for reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* Global animations and spinner fixes */

/* Keyframes for Material-UI CircularProgress rotation */
@keyframes mui-progress-circular-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Keyframes for the circular dash animation */
@keyframes mui-progress-circular-dash {
  0% {
    stroke-dasharray: 1px, 200px;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -15px;
  }
  100% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -125px;
  }
}

/* Force rotation for MUI CircularProgress */
.MuiCircularProgress-root {
  animation: mui-progress-circular-rotate 1.4s linear infinite !important;
}

.MuiCircularProgress-circle {
  animation: mui-progress-circular-dash 1.4s ease-in-out infinite !important;
  stroke-dasharray: 80px, 200px;
  stroke-dashoffset: 0;
}

/* Generic helpers for custom spinners */
[data-spinner],
.spinner,
.loading-spinner {
  animation: mui-progress-circular-rotate 1s linear infinite !important;
}

/* If user has reduced motion enabled, keep app accessible but allow critical spinners to animate */
@media (prefers-reduced-motion: reduce) {
  /* Re-enable animation for critical loading indicators */
  .MuiCircularProgress-root,
  .MuiCircularProgress-circle,
  [data-spinner],
  .spinner,
  .loading-spinner {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
}