/*
 * Home Search design tokens
 * -------------------------
 * Change the dashboard's colour, type, spacing, radius, shadow and motion here
 * before editing component rules. Component CSS consumes these variables.
 */
:root {
  --color-text: #12221c;
  --color-text-muted: #5d6d66;
  --color-canvas: #f4f6f2;
  --color-surface: #ffffff;
  --color-border: #dce3de;
  --color-border-strong: #c6d1ca;
  --color-brand: #176047;
  --color-brand-strong: #103e30;
  --color-brand-soft: #dff1e9;
  --color-brand-wash: #eef8f3;
  --color-sand: #f4e8cb;
  --color-danger-soft: #ffdcd3;
  --color-danger-text: #8b2f24;
  --color-warning-soft: #fff1ce;
  --color-warning-text: #80590d;

  /* Backwards-compatible aliases keep component migration incremental. */
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --paper: var(--color-canvas);
  --panel: var(--color-surface);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --forest: var(--color-brand);
  --forest-dark: var(--color-brand-strong);
  --forest-soft: var(--color-brand-soft);
  --mint: var(--color-brand-wash);
  --sand: var(--color-sand);
  --coral: var(--color-danger-soft);
  --coral-ink: var(--color-danger-text);
  --amber: var(--color-warning-soft);
  --amber-ink: var(--color-warning-text);

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-control: 15px;
  --line-height-body: 1.55;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-control: 10px;
  --radius-card: 20px;
  --shadow-panel: 0 16px 42px rgba(18, 48, 37, .08);
  --motion-standard: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 200ms;
  --shadow: var(--shadow-panel);
  --ease: var(--motion-standard);

  color: var(--color-text);
  background: var(--color-canvas);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  font-synthesis: none;
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}