/* Design tokens — Park & Ride mock v2.
   Google-design-inspired: clean, no gradients, neutral grays, no blue cast in dark theme. */

:root {
  /* Surfaces */
  --bg:            #ffffff;
  --map-bg:        #f0f0f0;
  --chrome:        #e8eaed;
  --chrome-strong: #dadce0;

  /* Text */
  --text-primary:   #202124;
  --text-secondary: #5f6368;
  --text-muted:     #80868b;

  /* Accent (Google blue) */
  --accent:      #1a73e8;
  --accent-soft: rgba(26, 115, 232, 0.08);
  --accent-text: #ffffff;

  /* Status (Google Material darker variants) */
  --status-free:   #1e8e3e;
  --status-medium: #f29900;
  --status-full:   #d93025;
  --status-amber-text: #b06000;  /* amber color for muted "stale" inline annotations */

  /* Borders */
  --border:        rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.20);

  /* Shadows — restrained, no glow */
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card:   0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-marker: 0 2px 6px rgba(0, 0, 0, 0.20);

  /* Geometry */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;

  /* Chrome dimensions */
  --header-h:    56px;
  --sidebar-w:   340px;
  --sidebar-rail-w: 48px;
  --canvas-inset: 12px;
  --page-pad:    16px;

  /* Typography */
  --font-sans: "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --easing:        cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration:      250ms;
  --duration-slow: 400ms;

  /* Theme icon (single glyph swap) */
  --theme-glyph: "◐";
}

[data-theme="dark"] {
  /* Surfaces — strict neutral, no blue tint */
  --bg:            #0a0a0a;
  --map-bg:        #181818;
  --chrome:        #2a2a2a;
  --chrome-strong: #3c3c3c;

  /* Text */
  --text-primary:   #e8eaed;
  --text-secondary: #9aa0a6;
  --text-muted:     #6b6f73;

  /* Accent (lighter Google blue) */
  --accent:      #8ab4f8;
  --accent-soft: rgba(138, 180, 248, 0.12);
  --accent-text: #0a0a0a;

  /* Status (slightly brighter for dark backgrounds) */
  --status-free:   #34a853;
  --status-medium: #fbbc04;
  --status-full:   #ea4335;
  --status-amber-text: #fbbc04;

  /* Borders */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.20);

  /* Shadows */
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-card:   0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-marker: 0 2px 8px rgba(0, 0, 0, 0.60);

  --theme-glyph: "◑";
}