/* Material 3 Expressive design tokens.
   Generated from a source color (#00BCD4) using Material Color Utilities
   conventions. We keep this hand-written to avoid a build-time dependency
   for the design tokens themselves — the values here follow M3 baseline
   tonal palette steps and the "Expressive" extensions (larger shape scale,
   springier motion). */

:root {
  color-scheme: light dark;

  /* === Color (light) === */
  --md-sys-color-primary: #006874;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #97F0FF;
  --md-sys-color-on-primary-container: #001F24;

  --md-sys-color-secondary: #4A6267;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #CDE7EC;
  --md-sys-color-on-secondary-container: #051F23;

  --md-sys-color-tertiary: #525E7D;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #DAE2FF;
  --md-sys-color-on-tertiary-container: #0D1B37;

  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-background: #FAFDFD;
  --md-sys-color-on-background: #191C1D;
  --md-sys-color-surface: #FAFDFD;
  --md-sys-color-on-surface: #191C1D;
  --md-sys-color-surface-variant: #DBE4E6;
  --md-sys-color-on-surface-variant: #3F484A;
  --md-sys-color-surface-container: #EEF1F2;
  --md-sys-color-surface-container-high: #E8ECED;
  --md-sys-color-surface-container-highest: #E2E5E7;
  --md-sys-color-outline: #6F797B;
  --md-sys-color-outline-variant: #BFC8CA;

  --md-sys-color-inverse-surface: #2D3132;
  --md-sys-color-inverse-on-surface: #EFF1F2;
  --md-sys-color-inverse-primary: #4FD8EE;

  /* App-specific (Path) */
  --map-bg: #0E1116;
  --road-known: #00BCD4;
  --road-new: #FFB74D;

  /* === Shape (Expressive bumps a step) === */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-xs: 8px;
  --md-sys-shape-corner-sm: 12px;
  --md-sys-shape-corner-md: 20px;
  --md-sys-shape-corner-lg: 28px;
  --md-sys-shape-corner-xl: 36px;
  --md-sys-shape-corner-full: 9999px;

  /* === Motion (Expressive spring physics) === */
  --md-sys-motion-easing-spring-fast: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --md-sys-motion-easing-spring-default: cubic-bezier(0.3, 0.0, 0.0, 1.0);
  --md-sys-motion-easing-spring-slow: cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --md-sys-motion-duration-short1: 100ms;
  --md-sys-motion-duration-short2: 150ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 350ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 550ms;

  /* === Typography === */
  --md-sys-typescale-display-large-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-weight: 400;

  --md-ref-typeface-brand: 'Inter', system-ui, -apple-system, sans-serif;
  --md-ref-typeface-plain: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #4FD8EE;
    --md-sys-color-on-primary: #00363D;
    --md-sys-color-primary-container: #004F58;
    --md-sys-color-on-primary-container: #97F0FF;

    --md-sys-color-secondary: #B1CBD0;
    --md-sys-color-on-secondary: #1C3438;
    --md-sys-color-secondary-container: #334B4F;
    --md-sys-color-on-secondary-container: #CDE7EC;

    --md-sys-color-tertiary: #BAC6EA;
    --md-sys-color-on-tertiary: #23304D;
    --md-sys-color-tertiary-container: #3A4664;
    --md-sys-color-on-tertiary-container: #DAE2FF;

    --md-sys-color-background: #0E1416;
    --md-sys-color-on-background: #DDE4E5;
    --md-sys-color-surface: #0E1416;
    --md-sys-color-on-surface: #DDE4E5;
    --md-sys-color-surface-variant: #3F484A;
    --md-sys-color-on-surface-variant: #BFC8CA;
    --md-sys-color-surface-container: #1A2123;
    --md-sys-color-surface-container-high: #232A2C;
    --md-sys-color-surface-container-highest: #2D3437;
    --md-sys-color-outline: #899294;
    --md-sys-color-outline-variant: #3F484A;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: var(--md-ref-typeface-plain);
  height: 100%;
}

button, input, select, textarea { font: inherit; }

a { color: var(--md-sys-color-primary); }

.error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-md);
}

.ok {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-md);
}