/* ============================================================
   PayGate theme.css — design tokens + tema light/dark
   ============================================================ */
:root {
  --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1;
  --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155;
  --gray-800:#1e293b; --gray-900:#0f172a;
  --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-50:#eff6ff; --blue-100:#dbeafe;
  --green-500:#22c55e; --green-600:#16a34a; --green-50:#f0fdf4;
  --red-500:#ef4444; --red-600:#dc2626; --red-50:#fef2f2;
  --amber-50:#fffbeb; --amber-600:#d97706;

  --bg: var(--gray-50);
  --surface: #ffffff;
  --surface-2: var(--gray-100);
  --surface-3: var(--gray-200);
  --border: var(--gray-200);
  --text: var(--gray-900);
  --text-2: var(--gray-600);
  --text-3: var(--gray-400);
  --primary: #2563eb;
  --primary-hover: color-mix(in srgb, var(--primary) 82%, #000);
  --primary-soft: color-mix(in srgb, var(--primary) 10%, var(--surface));
  --primary-soft-2: color-mix(in srgb, var(--primary) 22%, var(--surface));
  --ok: var(--green-600); --ok-soft: color-mix(in srgb, var(--green-500) 12%, var(--surface));
  --warn: var(--amber-600); --warn-soft: color-mix(in srgb, var(--amber-600) 13%, var(--surface));
  --danger: var(--red-600); --danger-soft: color-mix(in srgb, var(--red-500) 11%, var(--surface));
  --sidebar-bg: #0f172a;
  --sidebar-fg: #cbd5e1;
  --code-bg: #0f172a;
  --code-fg: #e2e8f0;
  --shadow-sm: 0 1px 2px 0 rgba(15,23,42,.06);
  --shadow-md: 0 4px 12px -2px rgba(15,23,42,.10), 0 2px 4px -2px rgba(15,23,42,.06);
  --shadow-lg: 0 16px 40px -12px rgba(15,23,42,.22);
  --radius: .625rem;
  --radius-lg: 1rem;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

[data-theme="dark"] {
  --gray-50:#0b1120; --gray-100:#111a2e; --gray-200:#1b2740; --gray-300:#2c3b5c;
  --gray-400:#5c7198; --gray-500:#8ca1c5; --gray-600:#b6c6e0; --gray-700:#d4e0f1;
  --gray-800:#e9eff8; --gray-900:#f8fafd;
  --blue-600:#3b82f6; --blue-700:#60a5fa; --blue-50:rgba(59,130,246,.16); --blue-100:rgba(59,130,246,.28);
  --green-500:#4ade80; --green-600:#4ade80; --green-50:rgba(74,222,128,.14);
  --red-500:#f87171; --red-600:#f87171; --red-50:rgba(248,113,113,.14);
  --amber-50:rgba(251,191,36,.14); --amber-600:#fbbf24;

  --bg: var(--gray-50);
  --surface: #101a2e;
  --surface-2: var(--gray-100);
  --surface-3: var(--gray-200);
  --border: var(--gray-200);
  --text: var(--gray-900);
  --text-2: var(--gray-500);
  --text-3: var(--gray-400);
  --primary-hover: color-mix(in srgb, var(--primary) 78%, #fff);
  --primary-soft: color-mix(in srgb, var(--primary) 18%, var(--surface));
  --primary-soft-2: color-mix(in srgb, var(--primary) 32%, var(--surface));
  --sidebar-bg: #0a1122;
  --sidebar-fg: #9fb0cf;
  --code-bg: #0a1122;
  --code-fg: #dbe4f2;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.35);
  --shadow-md: 0 4px 14px -2px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.3);
  --shadow-lg: 0 18px 44px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}