/* Linear / Modern — design tokens */

:root {
  /* Backgrounds */
  --background-deep: #020203;
  --background-base: #050506;
  --background-elevated: #0a0a0c;
  --input-bg: #0f0f12;

  /* Surfaces */
  --surface: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.08);
  --surface-raised: rgba(255, 255, 255, 0.06);

  /* Foreground */
  --foreground: #ededef;
  --foreground-muted: #8a8f98;
  --foreground-subtle: rgba(255, 255, 255, 0.6);

  /* Accent (org override in base.html) */
  --accent: #5e6ad2;
  --accent-bright: #6872d9;
  --accent-glow: rgba(94, 106, 210, 0.3);

  /* Borders */
  --border-default: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(94, 106, 210, 0.3);
  --border-strong: rgba(255, 255, 255, 0.1);

  /* Semantic */
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.14);
  --info: #a5b4fc;
  --info-bg: color-mix(in srgb, var(--accent) 28%, transparent);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius: var(--radius-md);

  /* Shadows */
  --shadow-card:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 2px 20px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(0, 0, 0, 0.2);
  --shadow-card-hover:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 40px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(94, 106, 210, 0.1);
  --shadow-btn-primary:
    0 0 0 1px rgba(94, 106, 210, 0.5),
    0 4px 12px rgba(94, 106, 210, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
  --shadow-glow: var(--shadow-card-hover);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-normal: 300ms;

  /* Typography */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --header-h: 4rem;
  --max-width: 56rem;

  /* Legacy aliases */
  --bg: var(--background-base);
  --bg-elevated: var(--background-elevated);
  --text: var(--foreground);
  --text-muted: var(--foreground-muted);
  --text-dim: var(--foreground-subtle);
  --border: var(--border-default);
  --accent-hover: var(--accent-bright);
  --accent-muted: color-mix(in srgb, var(--accent) 25%, transparent);
  --shadow: var(--shadow-card);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}