/* Material 3 design tokens (baseline palette), light + dark themes. */

:root {
  /* Typography */
  --font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --type-headline-small: 400 1.5rem/2rem var(--font-family);
  --type-title-medium: 500 1rem/1.5rem var(--font-family);
  --type-title-small: 500 0.875rem/1.25rem var(--font-family);
  --type-body-large: 400 1rem/1.5rem var(--font-family);
  --type-body-medium: 400 0.875rem/1.25rem var(--font-family);
  --type-label-large: 500 0.875rem/1.25rem var(--font-family);
  --type-label-medium: 500 0.75rem/1rem var(--font-family);

  /* Shape */
  --shape-xs: 4px;
  --shape-s: 8px;
  --shape-m: 12px;
  --shape-l: 16px;
  --shape-full: 999px;

  /* Elevation */
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);

  /* Motion */
  --motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-short: 150ms;
  --duration-medium: 300ms;
}

/* ---- Light theme (default) ---- */
:root,
:root[data-theme="light"] {
  --color-primary: #6750a4;
  --color-on-primary: #ffffff;
  --color-primary-container: #eaddff;
  --color-on-primary-container: #21005d;
  --color-secondary: #625b71;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #e8def8;
  --color-on-secondary-container: #1d192b;
  --color-error: #b3261e;
  --color-on-error: #ffffff;
  --color-error-container: #f9dedc;
  --color-on-error-container: #410e0b;
  --color-surface: #fef7ff;
  --color-on-surface: #1d1b20;
  --color-on-surface-variant: #49454f;
  --color-surface-container-low: #f7f2fa;
  --color-surface-container: #f3edf7;
  --color-surface-container-high: #ece6f0;
  --color-surface-container-highest: #e6e0e9;
  --color-outline: #79747e;
  --color-outline-variant: #cac4d0;
  --color-inverse-surface: #322f35;
  --color-on-inverse-surface: #f5eff7;
  --color-success: #386a20;
  --color-scrim: rgba(0, 0, 0, 0.4);
}

/* ---- Dark theme ---- */
:root[data-theme="dark"] {
  --color-primary: #d0bcff;
  --color-on-primary: #381e72;
  --color-primary-container: #4f378b;
  --color-on-primary-container: #eaddff;
  --color-secondary: #ccc2dc;
  --color-on-secondary: #332d41;
  --color-secondary-container: #4a4458;
  --color-on-secondary-container: #e8def8;
  --color-error: #f2b8b5;
  --color-on-error: #601410;
  --color-error-container: #8c1d18;
  --color-on-error-container: #f9dedc;
  --color-surface: #141218;
  --color-on-surface: #e6e0e9;
  --color-on-surface-variant: #cac4d0;
  --color-surface-container-low: #1d1b20;
  --color-surface-container: #211f26;
  --color-surface-container-high: #2b2930;
  --color-surface-container-highest: #36343b;
  --color-outline: #938f99;
  --color-outline-variant: #49454f;
  --color-inverse-surface: #e6e0e9;
  --color-on-inverse-surface: #322f35;
  --color-success: #9bd67a;
  --color-scrim: rgba(0, 0, 0, 0.6);
}

/* System preference when the user has not chosen manually */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #d0bcff;
    --color-on-primary: #381e72;
    --color-primary-container: #4f378b;
    --color-on-primary-container: #eaddff;
    --color-secondary: #ccc2dc;
    --color-on-secondary: #332d41;
    --color-secondary-container: #4a4458;
    --color-on-secondary-container: #e8def8;
    --color-error: #f2b8b5;
    --color-on-error: #601410;
    --color-error-container: #8c1d18;
    --color-on-error-container: #f9dedc;
    --color-surface: #141218;
    --color-on-surface: #e6e0e9;
    --color-on-surface-variant: #cac4d0;
    --color-surface-container-low: #1d1b20;
    --color-surface-container: #211f26;
    --color-surface-container-high: #2b2930;
    --color-surface-container-highest: #36343b;
    --color-outline: #938f99;
    --color-outline-variant: #49454f;
    --color-inverse-surface: #e6e0e9;
    --color-on-inverse-surface: #322f35;
    --color-success: #9bd67a;
    --color-scrim: rgba(0, 0, 0, 0.6);
  }
}