/* Design tokens. The only file allowed to contain colour literals. */

:root {
  color-scheme: light;

  /* Surfaces and text — light */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f2f2f4;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --border: #e3e3e6;
  --accent: #c2410c;
  --accent-text: #ffffff;
  --accent-soft: #fdf0e9;
  --focus: #c2410c;
  --danger: #dc2626;

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

  /* Spacing — rem so the layout scales with the user's text size */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;

  /* Layout */
  --maxw: 34rem;
  --tap: 44px;
  --blur: 20px;
  --chrome-bg: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0b0c;
  --surface: #161617;
  --surface-2: #1f1f22;
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --border: #2c2c30;
  --accent: #ff8a4c;
  --accent-text: #1a0f08;
  --accent-soft: #2a1a12;
  --focus: #ff8a4c;
  --danger: #ff6b6b;

  --chrome-bg: rgba(22, 22, 23, 0.6);
}

/* Reduced-transparency users get solid chrome instead of blur */
@media (prefers-reduced-transparency: reduce) {
  :root,
  [data-theme="dark"] {
    --chrome-bg: var(--surface);
    --blur: 0px;
  }
}