:root {
  /* Seed color: #6750A4 */
  --m3-sys-color-primary: #6750A4;
  --m3-sys-color-on-primary: #FFFFFF;
  --m3-sys-color-primary-container: #EADDFF;
  --m3-sys-color-on-primary-container: #21005D;

  --m3-sys-color-secondary: #625B71;
  --m3-sys-color-on-secondary: #FFFFFF;
  --m3-sys-color-secondary-container: #E8DEF8;
  --m3-sys-color-on-secondary-container: #1D192B;

  --m3-sys-color-tertiary: #7D5260;
  --m3-sys-color-on-tertiary: #FFFFFF;
  --m3-sys-color-tertiary-container: #FFD8E4;
  --m3-sys-color-on-tertiary-container: #31111D;

  --m3-sys-color-error: #B3261E;
  --m3-sys-color-on-error: #FFFFFF;
  --m3-sys-color-error-container: #F9DEDC;
  --m3-sys-color-on-error-container: #410E0B;

  --m3-sys-color-background: #FFFBFE;
  --m3-sys-color-on-background: #1C1B1F;
  --m3-sys-color-surface: #FFFBFE;
  --m3-sys-color-on-surface: #1C1B1F;
  --m3-sys-color-surface-variant: #E7E0EC;
  --m3-sys-color-on-surface-variant: #49454F;

  --m3-sys-color-surface-container-lowest: #FFFFFF;
  --m3-sys-color-surface-container-low: #F7F2FA;
  --m3-sys-color-surface-container: #F3EDF7;
  --m3-sys-color-surface-container-high: #ECE6F0;
  --m3-sys-color-surface-container-highest: #E6E0E9;

  --m3-sys-color-outline: #79747E;
  --m3-sys-color-outline-variant: #CAC4D0;

  --m3-sys-color-shadow: #000000;
  --m3-sys-color-scrim: rgba(0, 0, 0, 0.32);
  --m3-sys-color-inverse-surface: #313033;
  --m3-sys-color-inverse-on-surface: #F4EFF4;
  --m3-sys-color-inverse-primary: #D0BCFF;

  /* ── Typography: Font Families ── */
  --m3-sys-typescale-brand-font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  --m3-sys-typescale-plain-font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  --m3-sys-typescale-font-family: var(--m3-sys-typescale-brand-font-family);

  /* ── Display ── */
  --m3-sys-typescale-display-large-font-family: var(--m3-sys-typescale-brand-font-family);
  --m3-sys-typescale-display-large-size: 57px;
  --m3-sys-typescale-display-large-line-height: 64px;
  --m3-sys-typescale-display-large-weight: 400;
  --m3-sys-typescale-display-large-tracking: -0.25px;

  --m3-sys-typescale-display-medium-font-family: var(--m3-sys-typescale-brand-font-family);
  --m3-sys-typescale-display-medium-size: 45px;
  --m3-sys-typescale-display-medium-line-height: 52px;
  --m3-sys-typescale-display-medium-weight: 400;
  --m3-sys-typescale-display-medium-tracking: 0px;

  --m3-sys-typescale-display-small-font-family: var(--m3-sys-typescale-brand-font-family);
  --m3-sys-typescale-display-small-size: 36px;
  --m3-sys-typescale-display-small-line-height: 44px;
  --m3-sys-typescale-display-small-weight: 400;
  --m3-sys-typescale-display-small-tracking: 0px;

  /* ── Headline ── */
  --m3-sys-typescale-headline-large-font-family: var(--m3-sys-typescale-brand-font-family);
  --m3-sys-typescale-headline-large-size: 32px;
  --m3-sys-typescale-headline-large-line-height: 40px;
  --m3-sys-typescale-headline-large-weight: 400;
  --m3-sys-typescale-headline-large-tracking: 0px;

  --m3-sys-typescale-headline-medium-font-family: var(--m3-sys-typescale-brand-font-family);
  --m3-sys-typescale-headline-medium-size: 28px;
  --m3-sys-typescale-headline-medium-line-height: 36px;
  --m3-sys-typescale-headline-medium-weight: 400;
  --m3-sys-typescale-headline-medium-tracking: 0px;

  --m3-sys-typescale-headline-small-font-family: var(--m3-sys-typescale-brand-font-family);
  --m3-sys-typescale-headline-small-size: 24px;
  --m3-sys-typescale-headline-small-line-height: 32px;
  --m3-sys-typescale-headline-small-weight: 400;
  --m3-sys-typescale-headline-small-tracking: 0px;

  /* ── Title ── */
  --m3-sys-typescale-title-large-font-family: var(--m3-sys-typescale-brand-font-family);
  --m3-sys-typescale-title-large-size: 22px;
  --m3-sys-typescale-title-large-line-height: 28px;
  --m3-sys-typescale-title-large-weight: 400;
  --m3-sys-typescale-title-large-tracking: 0px;

  --m3-sys-typescale-title-medium-font-family: var(--m3-sys-typescale-plain-font-family);
  --m3-sys-typescale-title-medium-size: 16px;
  --m3-sys-typescale-title-medium-line-height: 24px;
  --m3-sys-typescale-title-medium-weight: 500;
  --m3-sys-typescale-title-medium-tracking: 0.15px;

  --m3-sys-typescale-title-small-font-family: var(--m3-sys-typescale-plain-font-family);
  --m3-sys-typescale-title-small-size: 14px;
  --m3-sys-typescale-title-small-line-height: 20px;
  --m3-sys-typescale-title-small-weight: 500;
  --m3-sys-typescale-title-small-tracking: 0.1px;

  /* ── Body ── */
  --m3-sys-typescale-body-large-font-family: var(--m3-sys-typescale-plain-font-family);
  --m3-sys-typescale-body-large-size: 16px;
  --m3-sys-typescale-body-large-line-height: 24px;
  --m3-sys-typescale-body-large-weight: 400;
  --m3-sys-typescale-body-large-tracking: 0.5px;

  --m3-sys-typescale-body-medium-font-family: var(--m3-sys-typescale-plain-font-family);
  --m3-sys-typescale-body-medium-size: 14px;
  --m3-sys-typescale-body-medium-line-height: 20px;
  --m3-sys-typescale-body-medium-weight: 400;
  --m3-sys-typescale-body-medium-tracking: 0.25px;

  --m3-sys-typescale-body-small-font-family: var(--m3-sys-typescale-plain-font-family);
  --m3-sys-typescale-body-small-size: 12px;
  --m3-sys-typescale-body-small-line-height: 16px;
  --m3-sys-typescale-body-small-weight: 400;
  --m3-sys-typescale-body-small-tracking: 0.4px;

  /* ── Label ── */
  --m3-sys-typescale-label-large-font-family: var(--m3-sys-typescale-plain-font-family);
  --m3-sys-typescale-label-large-size: 14px;
  --m3-sys-typescale-label-large-line-height: 20px;
  --m3-sys-typescale-label-large-weight: 500;
  --m3-sys-typescale-label-large-tracking: 0.1px;

  --m3-sys-typescale-label-medium-font-family: var(--m3-sys-typescale-plain-font-family);
  --m3-sys-typescale-label-medium-size: 12px;
  --m3-sys-typescale-label-medium-line-height: 16px;
  --m3-sys-typescale-label-medium-weight: 500;
  --m3-sys-typescale-label-medium-tracking: 0.5px;

  --m3-sys-typescale-label-small-font-family: var(--m3-sys-typescale-plain-font-family);
  --m3-sys-typescale-label-small-size: 11px;
  --m3-sys-typescale-label-small-line-height: 16px;
  --m3-sys-typescale-label-small-weight: 500;
  --m3-sys-typescale-label-small-tracking: 0.5px;

  /* ── Elevation ── */
  --m3-sys-elevation-0: none;
  --m3-sys-elevation-1: 0px 1px 4px 0px rgba(0, 0, 0, 0.37);
  --m3-sys-elevation-2: 0px 2px 2px 0px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.3);
  --m3-sys-elevation-3: 0px 11px 7px 0px rgba(0, 0, 0, 0.19), 0px 13px 25px 0px rgba(0, 0, 0, 0.3);
  --m3-sys-elevation-4: 0px 14px 12px 0px rgba(0, 0, 0, 0.17), 0px 20px 40px 0px rgba(0, 0, 0, 0.3);
  --m3-sys-elevation-5: 0px 17px 17px 0px rgba(0, 0, 0, 0.15), 0px 27px 55px 0px rgba(0, 0, 0, 0.3);

  /* ── Shape (Corner Radius) ── */
  --m3-sys-shape-corner-none: 0px;
  --m3-sys-shape-corner-extra-small: 4px;
  --m3-sys-shape-corner-small: 8px;
  --m3-sys-shape-corner-medium: 12px;
  --m3-sys-shape-corner-large: 16px;
  --m3-sys-shape-corner-large-increased: 20px;
  --m3-sys-shape-corner-extra-large: 28px;
  --m3-sys-shape-corner-extra-large-increased: 32px;
  --m3-sys-shape-corner-extra-extra-large: 48px;
  --m3-sys-shape-corner-full: 9999px;

  /* ── Motion: Easing ── */
  --m3-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
  --m3-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  --m3-sys-motion-easing-standard-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --m3-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
  --m3-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  --m3-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --m3-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);

  /* ── Motion: Duration ── */
  --m3-sys-motion-duration-short1: 50ms;
  --m3-sys-motion-duration-short2: 100ms;
  --m3-sys-motion-duration-short3: 150ms;
  --m3-sys-motion-duration-short4: 200ms;
  --m3-sys-motion-duration-medium1: 250ms;
  --m3-sys-motion-duration-medium2: 300ms;
  --m3-sys-motion-duration-medium3: 350ms;
  --m3-sys-motion-duration-medium4: 400ms;
  --m3-sys-motion-duration-long1: 450ms;
  --m3-sys-motion-duration-long2: 500ms;
  --m3-sys-motion-duration-long3: 550ms;
  --m3-sys-motion-duration-long4: 600ms;
  --m3-sys-motion-duration-extra-long1: 700ms;
  --m3-sys-motion-duration-extra-long2: 800ms;
  --m3-sys-motion-duration-extra-long3: 900ms;
  --m3-sys-motion-duration-extra-long4: 1000ms;

  /* ── State Layer Opacity ── */
  --m3-sys-state-hover-opacity: 0.08;
  --m3-sys-state-focus-opacity: 0.12;
  --m3-sys-state-pressed-opacity: 0.12;
  --m3-sys-state-dragged-opacity: 0.16;
}

/* ── Dark Theme ── */
@media (prefers-color-scheme: dark) {
  :root {
    --m3-sys-color-primary: #D0BCFF;
    --m3-sys-color-on-primary: #381E72;
    --m3-sys-color-primary-container: #4F378B;
    --m3-sys-color-on-primary-container: #EADDFF;

    --m3-sys-color-secondary: #CCC2DC;
    --m3-sys-color-on-secondary: #332D41;
    --m3-sys-color-secondary-container: #4A4458;
    --m3-sys-color-on-secondary-container: #E8DEF8;

    --m3-sys-color-tertiary: #EFB8C8;
    --m3-sys-color-on-tertiary: #492532;
    --m3-sys-color-tertiary-container: #633B48;
    --m3-sys-color-on-tertiary-container: #FFD8E4;

    --m3-sys-color-error: #F2B8B5;
    --m3-sys-color-on-error: #601410;
    --m3-sys-color-error-container: #8C1D18;
    --m3-sys-color-on-error-container: #F9DEDC;

    --m3-sys-color-background: #1C1B1F;
    --m3-sys-color-on-background: #E6E1E5;
    --m3-sys-color-surface: #1C1B1F;
    --m3-sys-color-on-surface: #E6E1E5;
    --m3-sys-color-surface-variant: #49454F;
    --m3-sys-color-on-surface-variant: #CAC4D0;

    --m3-sys-color-surface-container-lowest: #0F0D13;
    --m3-sys-color-surface-container-low: #1D1B20;
    --m3-sys-color-surface-container: #211F26;
    --m3-sys-color-surface-container-high: #2B2930;
    --m3-sys-color-surface-container-highest: #36343B;

    --m3-sys-color-outline: #938F99;
    --m3-sys-color-outline-variant: #49454F;

    --m3-sys-color-shadow: #000000;
    --m3-sys-color-scrim: rgba(0, 0, 0, 0.32);
    --m3-sys-color-inverse-surface: #E6E1E5;
    --m3-sys-color-inverse-on-surface: #313033;
    --m3-sys-color-inverse-primary: #6750A4;
  }
}

body {
  font-family: var(--m3-sys-typescale-font-family);
  background-color: var(--m3-sys-color-background);
  color: var(--m3-sys-color-on-background);
  margin: 0;
}

/* Material Symbols Font Setup */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp,
.m3-icon,
.m3-fab-icon,
.m3-icon-button-icon {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
}

.material-symbols-sharp {
  font-family: 'Material Symbols Sharp';
}