/* Design tokens — single source of truth for color, type, space, radius, shadow, motion.
   Dark mode is the default. Light mode is opt-in via [data-theme="light"]. */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-0: #0b0d10;
  --bg-1: #14171c;
  --bg-2: #1c2128;

  /* Text */
  --text-1: #e6e9ef;
  --text-2: #a8b0bd;
  --text-3: #6b7280;

  /* Accents / status */
  --accent: #4f8cff;
  --accent-soft: rgba(79, 140, 255, 0.16);
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.18);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, 0.18);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.18);
  --neutral-soft: rgba(168, 176, 189, 0.14);

  /* Lines */
  --border: #262b33;
  --border-strong: #353c47;
  --focus: #4f8cff;
  --focus-ring: 0 0 0 3px rgba(79, 140, 255, 0.4);

  /* Type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-24: 24px;
  --fw-regular: 400;
  --fw-semibold: 600;
  --lh-tight: 1.25;
  --lh-normal: 1.55;

  /* Space (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* Layout */
  --max-w: 1280px;
  --topbar-h: 56px;
}

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

  --bg-0: #f7f8fa;
  --bg-1: #ffffff;
  --bg-2: #f0f2f5;

  --text-1: #0b0d10;
  --text-2: #404754;
  --text-3: #6b7280;

  --accent-soft: rgba(79, 140, 255, 0.12);
  --success-soft: rgba(34, 197, 94, 0.14);
  --warn-soft: rgba(245, 158, 11, 0.16);
  --danger-soft: rgba(239, 68, 68, 0.14);
  --neutral-soft: rgba(64, 71, 84, 0.10);

  --border: #e1e4ea;
  --border-strong: #c8cdd6;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
  }
  *,
  *::before,
  *::after {
    transition-duration: var(--dur-fast) !important;
    animation-duration: var(--dur-fast) !important;
    scroll-behavior: auto !important;
  }
}