/* ===== Design System — CSS Variables ===== */

:root {
  /* Colors */
  --color-bg:         #0f0f13;
  --color-surface:    #1a1a24;
  --color-text:       #e2e2e8;
  --color-muted:      #8888a0;
  --color-accent:     #ff6b35;
  --color-accent-hover: #ff8255;
  --color-accent-bg:  rgba(255, 107, 53, 0.12);
  --color-border:     #2a2a3a;
  --color-success:    #4ade80;
  --color-warning:    #facc15;
  --color-danger:     #f87171;

  /* Typography */
  --font-main:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     1.875rem;
  --line-height:  1.65;
  --line-height-tight: 1.3;

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

  /* Layout */
  --container-width:    720px;
  --sidebar-width:      260px;
  --header-height:      56px;
  --action-bar-height:  48px;
  --radius:             8px;
  --radius-sm:          4px;
  --shadow:             0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg:          0 4px 16px rgba(0, 0, 0, 0.4);

  /* Scroll offset for sticky header */
  --scroll-offset: calc(var(--header-height) + var(--space-md));
}

/* Mobile: bump base text to 18px */
@media (max-width: 768px) {
  :root {
    --text-base: 1.125rem;
  }
}