/* theme.css — ALL design tokens live here. Re-theming = editing this :root only. Default theme is dark. */
:root {
  --color-bg: #0f1115;
  --color-surface: #161a22;
  --color-surface-2: #1d2230;
  --color-text: #e8eaf0;
  --color-text-muted: #9aa3b2;
  --color-border: #2a3040;
  --color-accent-1: #6c8cff;
  --color-accent-2: #38d0a5;
  --color-danger: #ff6b6b;
  --color-warning: #ffb454;
  --color-success: #38d0a5;
  --color-info: #5ac8fa;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --shadow-3: 0 16px 48px rgba(0,0,0,.55);
  --font-sans: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif;
  --font-size: 15px;
  --gap: 1rem;
  --maxw: 1120px;
}
* { box-sizing: border-box; }
html { font-size: var(--font-size); }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-sans); min-height: 100vh; display: flex; flex-direction: column;
}
[dir="rtl"] body, [dir="rtl"] { font-family: var(--font-arabic); }
main.page { flex: 1; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: var(--gap); }
a { color: var(--color-accent-1); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
::placeholder { color: var(--color-text-muted); }