/* ============================================
   KVATASK SITE — DESIGN TOKENS
   Палитра светлой/тёмной/glass темы синхронизирована с
   static/css/themes.css продукта. Раз в релиз сверять руками.
   ============================================ */

:root {
  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', Menlo, Monaco, 'Cascadia Code', Consolas, monospace;

  /* ===== Brand ===== */
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-light: #818cf8;
  --primary-muted: rgba(79, 70, 229, 0.1);

  --success: #10b981;
  --success-light: #d1fae5;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --danger: #ef4444;
  --danger-light: #fee2e2;
  --info: #3b82f6;
  --info-light: #dbeafe;

  /* ===== Surfaces ===== */
  --bg-page: #f4f4f5;
  --bg-primary: #ffffff;
  --bg-secondary: #f4f4f5;
  --bg-tertiary: #e4e4e7;
  --card: #ffffff;
  --border: #e4e4e7;
  --border-hover: #d4d4d8;

  --text: #18181b;
  --text-secondary: #52525b;
  --text-muted: #a1a1aa;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12);

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  --nav-bg: rgba(255, 255, 255, 0.8);
  --nav-border: rgba(228, 228, 231, 0.5);

  --hero-gradient-1: rgba(79, 70, 229, 0.08);
  --hero-gradient-2: rgba(16, 185, 129, 0.06);
  --hero-gradient-3: rgba(79, 70, 229, 0.04);

  /* ===== Display typography (portal-only) ===== */
  --display-1: clamp(2.5rem, 6vw, 5.25rem);
  --display-2: clamp(2rem, 4.5vw, 3.5rem);
  --display-3: clamp(1.625rem, 3vw, 2.25rem);

  /* ===== Gradients (portal-only) ===== */
  --gradient-mcp: linear-gradient(135deg, #4f46e5 0%, #06b6d4 50%, #10b981 100%);
  --gradient-aurora: conic-gradient(from 180deg at 50% 50%, #4f46e5 0deg, #818cf8 90deg, #06b6d4 180deg, #10b981 270deg, #4f46e5 360deg);
}

/* ===== Dark theme ===== */
[data-theme="dark"] {
  --primary: #818cf8;
  --primary-dark: #6366f1;
  --primary-light: #a5b4fc;
  --primary-muted: rgba(129, 140, 248, 0.15);
  --success: #34d399;
  --success-light: rgba(52, 211, 153, 0.15);
  --warning: #fbbf24;
  --warning-light: rgba(251, 191, 36, 0.15);
  --danger: #f87171;
  --danger-light: rgba(248, 113, 113, 0.15);
  --info: #60a5fa;
  --info-light: rgba(96, 165, 250, 0.15);

  --bg-page: #0f1117;
  --bg-primary: #1a1b2e;
  --bg-secondary: #1c1e2d;
  --bg-tertiary: #252840;
  --card: #1c1e2d;
  --border: #2d3052;
  --border-hover: #3d4070;

  --text: #e4e4e7;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);

  --nav-bg: rgba(15, 17, 23, 0.85);
  --nav-border: rgba(45, 48, 82, 0.5);

  --hero-gradient-1: rgba(129, 140, 248, 0.1);
  --hero-gradient-2: rgba(52, 211, 153, 0.07);
  --hero-gradient-3: rgba(129, 140, 248, 0.05);
}

/* ===== Glass theme ===== */
[data-theme="glass"] {
  --primary: #0071e3;
  --primary-dark: #0058b0;
  --primary-light: #5ac8fa;
  --primary-muted: rgba(0, 113, 227, 0.1);
  --success: #30d158;
  --warning: #ff9f0a;
  --danger: #ff453a;
  --info: #0a84ff;

  --bg-page: #f0f0f5;
  --bg-primary: rgba(255, 255, 255, 0.72);
  --bg-secondary: rgba(255, 255, 255, 0.5);
  --bg-tertiary: rgba(255, 255, 255, 0.35);
  --card: rgba(255, 255, 255, 0.72);
  --border: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.15);

  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-muted: #aeaeb2;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  --nav-bg: rgba(255, 255, 255, 0.6);
  --nav-border: rgba(0, 0, 0, 0.06);

  --hero-gradient-1: rgba(0, 113, 227, 0.06);
  --hero-gradient-2: rgba(48, 209, 88, 0.05);
  --hero-gradient-3: rgba(90, 200, 250, 0.04);
}