:root {
    --md3-primary-10: #001a41;
    --md3-primary-20: #003062;
    --md3-primary-30: #00468f;
    --md3-primary-40: #1a56db;
    --md3-primary-50: #3b82f6;
    --md3-primary-60: #60a5fa;
    --md3-primary-70: #93c5fd;
    --md3-primary-80: #bfdbfe;
    --md3-primary-90: #dbeafe;
    --md3-primary-95: #eff6ff;
    --md3-primary-99: #fafcff;

    --md3-secondary-10: #1e293b;
    --md3-secondary-20: #334155;
    --md3-secondary-30: #475569;
    --md3-secondary-40: #64748b;
    --md3-secondary-50: #94a3b8;
    --md3-secondary-60: #a8b5c4;
    --md3-secondary-70: #bcc7d3;
    --md3-secondary-80: #cbd5e1;
    --md3-secondary-90: #e2e8f0;
    --md3-secondary-95: #f1f5f9;
    --md3-secondary-99: #f8fafc;

    --md3-neutral-10: #0f172a;
    --md3-neutral-20: #1e293b;
    --md3-neutral-30: #334155;
    --md3-neutral-40: #475569;
    --md3-neutral-50: #64748b;
    --md3-neutral-60: #94a3b8;
    --md3-neutral-70: #cbd5e1;
    --md3-neutral-80: #e2e8f0;
    --md3-neutral-90: #f1f5f9;
    --md3-neutral-95: #f8fafc;
    --md3-neutral-99: #ffffff;

    --md3-neutral-variant-10: #1e293b;
    --md3-neutral-variant-20: #334155;
    --md3-neutral-variant-30: #475569;
    --md3-neutral-variant-40: #64748b;
    --md3-neutral-variant-50: #94a3b8;
    --md3-neutral-variant-60: #a8b5c4;
    --md3-neutral-variant-70: #bcc7d3;
    --md3-neutral-variant-80: #e2e8f0;
    --md3-neutral-variant-90: #f1f5f9;
    --md3-neutral-variant-95: #f8fafc;
    --md3-neutral-variant-99: #ffffff;

    --md3-light-primary: #1a56db;
    --md3-light-on-primary: #ffffff;
    --md3-light-primary-container: #dbeafe;
    --md3-light-on-primary-container: #1e3a5f;

    --md3-light-secondary: #475569;
    --md3-light-on-secondary: #ffffff;
    --md3-light-secondary-container: #f1f5f9;
    --md3-light-on-secondary-container: #1e293b;

    --md3-light-surface: #ffffff;
    --md3-light-surface-dim: #f8fafc;
    --md3-light-surface-bright: #ffffff;
    --md3-light-surface-container-lowest: #ffffff;
    --md3-light-surface-container-low: #f8fafc;
    --md3-light-surface-container: #f1f5f9;
    --md3-light-surface-container-high: #e2e8f0;
    --md3-light-surface-container-highest: #cbd5e1;

    --md3-light-on-surface: #0f172a;
    --md3-light-on-surface-variant: #475569;
    --md3-light-outline: #64748b;
    --md3-light-outline-variant: #e2e8f0;

    --md3-dark-primary: #60a5fa;
    --md3-dark-on-primary: #1e3a5f;
    --md3-dark-primary-container: #1e40af;
    --md3-dark-on-primary-container: #dbeafe;

    --md3-dark-secondary: #94a3b8;
    --md3-dark-on-secondary: #1e293b;
    --md3-dark-secondary-container: #334155;
    --md3-dark-on-secondary-container: #e2e8f0;

    --md3-dark-surface: #0f172a;
    --md3-dark-surface-dim: #0f172a;
    --md3-dark-surface-bright: #334155;
    --md3-dark-surface-container-lowest: #020617;
    --md3-dark-surface-container-low: #1e293b;
    --md3-dark-surface-container: #1e293b;
    --md3-dark-surface-container-high: #334155;
    --md3-dark-surface-container-highest: #475569;

    --md3-dark-on-surface: #f1f5f9;
    --md3-dark-on-surface-variant: #94a3b8;
    --md3-dark-outline: #64748b;
    --md3-dark-outline-variant: #334155;

    --md3-success: #16a34a;
    --md3-success-container: #dcfce7;
    --md3-on-success: #ffffff;
    --md3-on-success-container: #14532d;
    --md3-warning: #ea580c;
    --md3-warning-container: #ffedd5;
    --md3-on-warning: #ffffff;
    --md3-on-warning-container: #7c2d12;
    --md3-error: #dc2626;
    --md3-error-container: #fee2e2;
    --md3-on-error: #ffffff;
    --md3-on-error-container: #7f1d1d;

    --md3-shape-none: 0;
    --md3-shape-extra-small: 4px;
    --md3-shape-small: 8px;
    --md3-shape-medium: 12px;
    --md3-shape-large: 16px;
    --md3-shape-extra-large: 24px;
    --md3-shape-full: 9999px;

    --md3-elevation-level0: none;
    --md3-elevation-level1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --md3-elevation-level2: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --md3-elevation-level3: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
    --md3-elevation-level4: 0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);
    --md3-elevation-level5: 0 25px 50px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.06);

    --md3-state-hover-opacity: 0.08;
    --md3-state-focus-opacity: 0.12;
    --md3-state-press-opacity: 0.16;
    --md3-state-drag-opacity: 0.16;

    --md3-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md3-motion-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md3-motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);
    --md3-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);

    --md3-motion-duration-short1: 50ms;
    --md3-motion-duration-short2: 100ms;
    --md3-motion-duration-short3: 150ms;
    --md3-motion-duration-short4: 200ms;
    --md3-motion-duration-medium1: 250ms;
    --md3-motion-duration-medium2: 300ms;
    --md3-motion-duration-medium3: 350ms;
    --md3-motion-duration-medium4: 400ms;
    --md3-motion-duration-long1: 450ms;
    --md3-motion-duration-long2: 500ms;
    --md3-motion-duration-long3: 550ms;
    --md3-motion-duration-long4: 600ms;
}

:root,
[data-theme="light"] {
    --md-sys-color-primary: var(--md3-light-primary);
    --md-sys-color-on-primary: var(--md3-light-on-primary);
    --md-sys-color-primary-container: var(--md3-light-primary-container);
    --md-sys-color-on-primary-container: var(--md3-light-on-primary-container);

    --md-sys-color-secondary: var(--md3-light-secondary);
    --md-sys-color-on-secondary: var(--md3-light-on-secondary);
    --md-sys-color-secondary-container: var(--md3-light-secondary-container);
    --md-sys-color-on-secondary-container: var(--md3-light-on-secondary-container);

    --md-sys-color-surface: var(--md3-light-surface);
    --md-sys-color-surface-dim: var(--md3-light-surface-dim);
    --md-sys-color-surface-bright: var(--md3-light-surface-bright);
    --md-sys-color-surface-container-lowest: var(--md3-light-surface-container-lowest);
    --md-sys-color-surface-container-low: var(--md3-light-surface-container-low);
    --md-sys-color-surface-container: var(--md3-light-surface-container);
    --md-sys-color-surface-container-high: var(--md3-light-surface-container-high);
    --md-sys-color-surface-container-highest: var(--md3-light-surface-container-highest);

    --md-sys-color-on-surface: var(--md3-light-on-surface);
    --md-sys-color-on-surface-variant: var(--md3-light-on-surface-variant);
    --md-sys-color-outline: var(--md3-light-outline);
    --md-sys-color-outline-variant: var(--md3-light-outline-variant);

    --md-sys-color-success: var(--md3-success);
    --md-sys-color-success-container: var(--md3-success-container);
    --md-sys-color-on-success: var(--md3-on-success);
    --md-sys-color-on-success-container: var(--md3-on-success-container);
    --md-sys-color-warning: var(--md3-warning);
    --md-sys-color-warning-container: var(--md3-warning-container);
    --md-sys-color-on-warning: var(--md3-on-warning);
    --md-sys-color-on-warning-container: var(--md3-on-warning-container);
    --md-sys-color-error: var(--md3-error);
    --md-sys-color-error-container: var(--md3-error-container);
    --md-sys-color-on-error: var(--md3-on-error);
    --md-sys-color-on-error-container: var(--md3-on-error-container);
}


body {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}