/*
 * Layout Tokens – Search & Results UI
 * Lightweight design variables for spacing, typography, and surface colors.
 */

:root {
  --layout-space-1: 0.25rem;
  --layout-space-2: 0.5rem;
  --layout-space-3: 0.75rem;
  --layout-space-4: 1rem;
  --layout-space-5: 1.5rem;
  --layout-space-6: 2rem;
  --layout-space-7: 2.5rem;
  --layout-space-8: 3rem;

  --layout-font-sm: 0.875rem;
  --layout-font-base: 1rem;
  --layout-font-lg: 1.125rem;

  --layout-radius-sm: 6px;
  --layout-radius-md: 10px;
  --layout-radius-lg: 16px;

  --layout-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.12);
  --layout-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.12);

  --layout-text: #1f2937;
  --layout-muted: #64748b;
  --layout-surface: #f8fafc;
  --layout-surface-strong: #ffffff;
  --layout-surface-muted: #eef2f7;
  --layout-border: rgba(148, 163, 184, 0.4);
  --layout-accent: var(--accent, #2563eb);
  --layout-accent-soft: rgba(37, 99, 235, 0.12);
  --layout-danger: #dc2626;

  --layout-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

body.dark-mode {
  --layout-text: #e2e8f0;
  --layout-muted: #94a3b8;
  --layout-surface: #0f172a;
  --layout-surface-strong: #111827;
  --layout-surface-muted: #1f2937;
  --layout-border: rgba(148, 163, 184, 0.25);
  --layout-accent-soft: rgba(125, 211, 252, 0.16);
  --layout-focus-ring: 0 0 0 3px rgba(125, 211, 252, 0.45);
}