/* [Intent: Define Material Design 3 (Light Mode) Design Tokens] */
:root {
  /* Colors */
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-surface: #fffbff;
  --md-sys-color-on-surface: #1c1b1f;
  --md-sys-color-surface-variant: #e7e0ec;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #1d192b;
  --md-sys-color-error: #b3261e;
  --md-sys-color-outline: #79747e;

  /* Shadows (Elevations) */
  --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);

  /* Shapes */
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;

  /* Typography Base */
  --md-sys-typescale-body-large: 1rem;
}

/* [Intent: Reset and Base Styles] */
html,
body {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  margin: 0;
  padding: 0;
}