/*
 * Material Design 3 token layer.
 * Colours are the M3 baseline scheme; swap the values here to re-theme the
 * whole app. Everything else in the CSS refers to these tokens only.
 */

:root {
  color-scheme: light dark;

  /* --- Light colour scheme ------------------------------------------- */
  --md-primary: #6750a4;
  --md-on-primary: #ffffff;
  --md-primary-container: #eaddff;
  --md-on-primary-container: #21005d;
  --md-secondary: #625b71;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #e8def8;
  --md-on-secondary-container: #1d192b;
  --md-tertiary: #7d5260;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ffd8e4;
  --md-on-tertiary-container: #31111d;
  --md-error: #b3261e;
  --md-on-error: #ffffff;
  --md-error-container: #f9dedc;
  --md-on-error-container: #410e0b;
  --md-surface: #fef7ff;
  --md-on-surface: #1d1b20;
  --md-surface-variant: #e7e0ec;
  --md-on-surface-variant: #49454f;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f7f2fa;
  --md-surface-container: #f3edf7;
  --md-surface-container-high: #ece6f0;
  --md-surface-container-highest: #e6e0e9;
  --md-outline: #79747e;
  --md-outline-variant: #cac4d0;
  --md-inverse-surface: #322f35;
  --md-inverse-on-surface: #f5eff7;
  --md-inverse-primary: #d0bcff;
  --md-scrim: #000000;
  --md-success: #2e6b41;
  --md-success-container: #cdeed6;
  --md-on-success-container: #06210f;

  /* --- Shape ---------------------------------------------------------- */
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 999px;

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

  /* --- Motion --------------------------------------------------------- */
  --md-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-duration-short: 150ms;
  --md-duration-medium: 250ms;

  /* --- Typography ----------------------------------------------------- */
  --md-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-display-small: 400 2.25rem/2.75rem var(--md-font);
  --md-headline-medium: 400 1.75rem/2.25rem var(--md-font);
  --md-headline-small: 400 1.5rem/2rem var(--md-font);
  --md-title-large: 400 1.375rem/1.75rem var(--md-font);
  --md-title-medium: 500 1rem/1.5rem var(--md-font);
  --md-title-small: 500 0.875rem/1.25rem var(--md-font);
  --md-body-large: 400 1rem/1.5rem var(--md-font);
  --md-body-medium: 400 0.875rem/1.25rem var(--md-font);
  --md-body-small: 400 0.75rem/1rem var(--md-font);
  --md-label-large: 500 0.875rem/1.25rem var(--md-font);
  --md-label-medium: 500 0.75rem/1rem var(--md-font);
  --md-label-small: 500 0.6875rem/1rem var(--md-font);

  /* --- Layout --------------------------------------------------------- */
  --app-rail-width: 88px;
  --app-bar-height: 64px;
  --app-nav-bar-height: 80px;
  --app-max-content: 1120px;
  --app-gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-primary: #d0bcff;
    --md-on-primary: #381e72;
    --md-primary-container: #4f378b;
    --md-on-primary-container: #eaddff;
    --md-secondary: #ccc2dc;
    --md-on-secondary: #332d41;
    --md-secondary-container: #4a4458;
    --md-on-secondary-container: #e8def8;
    --md-tertiary: #efb8c8;
    --md-on-tertiary: #492532;
    --md-tertiary-container: #633b48;
    --md-on-tertiary-container: #ffd8e4;
    --md-error: #f2b8b5;
    --md-on-error: #601410;
    --md-error-container: #8c1d18;
    --md-on-error-container: #f9dedc;
    --md-surface: #141218;
    --md-on-surface: #e6e0e9;
    --md-surface-variant: #49454f;
    --md-on-surface-variant: #cac4d0;
    --md-surface-container-lowest: #0f0d13;
    --md-surface-container-low: #1d1b20;
    --md-surface-container: #211f26;
    --md-surface-container-high: #2b2930;
    --md-surface-container-highest: #36343b;
    --md-outline: #938f99;
    --md-outline-variant: #49454f;
    --md-inverse-surface: #e6e0e9;
    --md-inverse-on-surface: #322f35;
    --md-inverse-primary: #6750a4;
    --md-success: #8fd6a4;
    --md-success-container: #22482f;
    --md-on-success-container: #cdeed6;
    --md-elev-1: 0 1px 3px rgba(0, 0, 0, 0.6);
    --md-elev-2: 0 2px 6px rgba(0, 0, 0, 0.6);
    --md-elev-3: 0 6px 16px rgba(0, 0, 0, 0.65);
  }
}