/* ═══════════════════════════════════════
   CSS Variables — Theme Coder
   ═══════════════════════════════════════ */

:root {
  /* ─── Typography ─── */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', Consolas, monospace;
  --font-size-base: 16px;
  --line-height: 1.7;
  --letter-spacing: -0.01em;

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

  /* ─── Layout ─── */
  --content-width: 760px;
  --sidebar-width: 240px;
  --gap: 3rem;
  --header-height: 56px;

  /* ─── Border ─── */
  --radius: 8px;
  --radius-sm: 4px;
  --border: 1px solid var(--c-border);

  /* ─── Transition ─── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.25s;
}

/* ═══════════════════════════════════════
   Dark Theme (default)
   ═══════════════════════════════════════ */
[data-theme="dark"] {
  --c-bg: #0d1117;
  --c-bg-secondary: #161b22;
  --c-bg-tertiary: #1c2128;
  --c-bg-hover: #1c2128;
  --c-bg-code: #161b22;
  --c-surface: #1c2128;

  --c-text: #e6edf3;
  --c-text-secondary: #8b949e;
  --c-text-tertiary: #6e7681;
  --c-text-link: #58a6ff;

  --c-border: #30363d;
  --c-border-light: #21262d;

  --c-accent: #58a6ff;
  --c-accent-hover: #79c0ff;
  --c-success: #3fb950;
  --c-warning: #d29922;
  --c-error: #f85149;

  --c-tag-bg: rgba(56, 139, 253, 0.15);
  --c-tag-text: #58a6ff;

  --c-selection: rgba(56, 139, 253, 0.3);

  /* Code colors */
  --code-keyword: #ff7b72;
  --code-string: #a5d6ff;
  --code-comment: #8b949e;
  --code-function: #d2a8ff;
  --code-number: #79c0ff;
  --code-operator: #ff7b72;
  --code-class: #ffa657;
  --code-variable: #ffa657;
  --code-gutter: #6e7681;
  --code-line-highlight: rgba(56, 139, 253, 0.1);
}

/* ═══════════════════════════════════════
   Light Theme
   ═══════════════════════════════════════ */
[data-theme="light"] {
  --c-bg: #ffffff;
  --c-bg-secondary: #f6f8fa;
  --c-bg-tertiary: #eaeef2;
  --c-bg-hover: #f3f4f6;
  --c-bg-code: #f6f8fa;
  --c-surface: #ffffff;

  --c-text: #1f2328;
  --c-text-secondary: #656d76;
  --c-text-tertiary: #8b949e;
  --c-text-link: #0969da;

  --c-border: #d0d7de;
  --c-border-light: #e8ecf0;

  --c-accent: #0969da;
  --c-accent-hover: #0550ae;
  --c-success: #1a7f37;
  --c-warning: #9a6700;
  --c-error: #d1242f;

  --c-tag-bg: rgba(9, 105, 218, 0.1);
  --c-tag-text: #0969da;

  --c-selection: rgba(9, 105, 218, 0.2);

  --code-keyword: #cf222e;
  --code-string: #0a3069;
  --code-comment: #6e7781;
  --code-function: #8250df;
  --code-number: #0550ae;
  --code-operator: #cf222e;
  --code-class: #953800;
  --code-variable: #953800;
  --code-gutter: #8b949e;
  --code-line-highlight: rgba(9, 105, 218, 0.05);
}