/* ==========================================================================
   Design tokens — Telegram AI Assistant admin (Phase 1)
   Breakpoints (used in media queries; CSS variables cannot be used there):
     --bp-sm 640px · --bp-md 768px · --bp-lg 1024px · --bp-xl 1280px
   ========================================================================== */

@font-face {
  font-family: "Vazirmatn";
  src: url("/admin/static/fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("/admin/static/fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* typography */
  --font-sans: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --lh-tight: 1.35;
  --lh-base: 1.75;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* spacing (4px scale) */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;

  /* sizes */
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-lg: 46px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 22px;
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --header-h: 64px;
  --content-max: 1440px;
  --drawer-w: min(300px, 86vw);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;

  /* z-index */
  --z-header: 30;
  --z-sidebar: 40;
  --z-backdrop: 45;
  --z-drawer: 50;
  --z-menu: 60;
  --z-modal: 70;
  --z-toast: 80;
}

/* ---------- light theme (default) ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6fa;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --surface-3: #f1f3f8;
  --surface-hover: #f4f5fa;
  --border: #e4e7ef;
  --border-strong: #d3d8e3;
  --text: #111827;
  --text-2: #4b5563;
  --text-3: #6b7280;
  --text-inverse: #ffffff;

  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-active: #3730a3;
  --primary-soft: #eef0ff;
  --primary-soft-2: #e0e3ff;
  --primary-text: #4338ca;
  --on-primary: #ffffff;

  --accent: #0d9488;
  --accent-soft: #e6f6f4;
  --accent-text: #0f766e;

  --success: #16a34a;
  --success-soft: #e7f7ee;
  --success-text: #15803d;
  --warning: #d97706;
  --warning-soft: #fdf3e2;
  --warning-text: #b45309;
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --danger-text: #b91c1c;
  --info: #2563eb;
  --info-soft: #e8f0fe;
  --info-text: #1d4ed8;
  --neutral-soft: #eef0f4;
  --neutral-text: #4b5563;

  --focus-ring: 0 0 0 3px rgba(79, 70, 229, .28);
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 6px 16px -4px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, .22);
  --backdrop: rgba(17, 24, 39, .45);

  /* charts */
  --chart-1: #4f46e5;
  --chart-2: #14b8a6;
  --chart-3: #f59e0b;
  --chart-4: #ef4444;
  --chart-grid: #eceef4;
  --chart-axis: #9aa1ae;

  --bubble-in: #ffffff;
  --bubble-out: #eef0ff;
  --code-bg: #f3f4f8;
  --skeleton: #eceef3;
  --skeleton-shine: #f6f7fa;
}

/* ---------- dark theme ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e15;
  --bg-elevated: #131823;
  --surface: #121722;
  --surface-2: #161c29;
  --surface-3: #1b2232;
  --surface-hover: #1a2130;
  --border: #242c3c;
  --border-strong: #313b4f;
  --text: #e8ebf2;
  --text-2: #b0b8c8;
  --text-3: #8b94a8;
  --text-inverse: #0b0e15;

  --primary: #6d6af3;
  --primary-hover: #7c79f6;
  --primary-active: #5a56ea;
  --primary-soft: rgba(109, 106, 243, .14);
  --primary-soft-2: rgba(109, 106, 243, .22);
  --primary-text: #a5a8ff;
  --on-primary: #ffffff;

  --accent: #2dd4bf;
  --accent-soft: rgba(45, 212, 191, .12);
  --accent-text: #5eead4;

  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, .13);
  --success-text: #4ade80;
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, .13);
  --warning-text: #fbbf24;
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, .13);
  --danger-text: #f87171;
  --info: #3b82f6;
  --info-soft: rgba(59, 130, 246, .14);
  --info-text: #7fb0ff;
  --neutral-soft: rgba(148, 163, 184, .12);
  --neutral-text: #b0b8c8;

  --focus-ring: 0 0 0 3px rgba(129, 126, 255, .38);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .7);
  --backdrop: rgba(3, 6, 12, .65);

  --chart-1: #818cf8;
  --chart-2: #2dd4bf;
  --chart-3: #fbbf24;
  --chart-4: #f87171;
  --chart-grid: #222a39;
  --chart-axis: #6f7a90;

  --bubble-in: #171e2c;
  --bubble-out: rgba(109, 106, 243, .16);
  --code-bg: #0f141e;
  --skeleton: #1a2130;
  --skeleton-shine: #222b3d;
}