/* ══════════════════════════════════════
   QuantzaraAI design tokens (universal)
   Load AFTER Bootstrap so --bs-* overrides apply.
══════════════════════════════════════ */

:root {
  /* Brand palette */
  --blue-950: #020b18;
  --blue-900: #041225;
  --blue-800: #072040;
  --blue-700: #0a3060;
  --blue-600: #0d4280;
  --blue-500: #1260b8;
  --blue-400: #1a7fe8;
  --blue-300: #4da3ff;
  --blue-200: #93c7ff;
  --blue-100: #cce3ff;
  --blue-50:  #e8f3ff;

  --white: #ffffff;
  --off:   #f4f8ff;
  --ink:   #0a1628;
  --ink2:  #2d4a6e;
  --ink3:  #5a7899;
  --ink4:  #8faabf;

  --accent:  #ff6b35;
  --accent2: #00d4a0;
  --warning: #f5c842;
  --border:  #e6e8ec;
  --border-strong: #cfd6e0;

  /* Radii */
  --r4: 4px;
  --r8: 8px;
  --r12: 12px;
  --r16: 16px;
  --r20: 20px;
  --r24: 24px;

  /* Type */
  --syne: 'Syne', sans-serif;
  --dm: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;

  /* Layout */
  --nav-h: 68px;
  --content-max: 1200px;
  --section-y: 6rem;
  --section-x: 2.5rem;

  /* Icon chip tones */
  --tone-0: #f3efe6;
  --tone-1: #f6e8ec;
  --tone-2: #efe9e0;
  --tone-3: #e8f0f7;
  --tone-4: #eef3e8;

  /* ── Bootstrap 5 theme ── */
  --bs-blue: var(--blue-500);
  --bs-primary: var(--blue-500);
  --bs-primary-rgb: 18, 96, 184;
  --bs-primary-text-emphasis: var(--blue-700);
  --bs-primary-bg-subtle: var(--blue-50);
  --bs-primary-border-subtle: var(--blue-100);

  --bs-secondary: var(--ink3);
  --bs-secondary-rgb: 90, 120, 153;
  --bs-success: var(--accent2);
  --bs-success-rgb: 0, 212, 160;
  --bs-warning: var(--warning);
  --bs-warning-rgb: 245, 200, 66;
  --bs-info: var(--blue-400);
  --bs-info-rgb: 26, 127, 232;
  --bs-dark: var(--blue-950);
  --bs-dark-rgb: 2, 11, 24;
  --bs-light: var(--off);
  --bs-light-rgb: 244, 248, 255;

  --bs-body-font-family: var(--dm);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--white);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-heading-color: var(--ink);

  --bs-link-color: var(--blue-500);
  --bs-link-color-rgb: 18, 96, 184;
  --bs-link-hover-color: var(--blue-400);
  --bs-link-hover-color-rgb: 26, 127, 232;

  --bs-border-color: var(--border);
  --bs-border-radius: var(--r12);
  --bs-border-radius-sm: var(--r8);
  --bs-border-radius-lg: var(--r16);
  --bs-border-radius-xl: var(--r20);
  --bs-border-radius-2xl: var(--r24);
  --bs-border-radius-pill: 999px;

  --bs-font-sans-serif: var(--dm);
  --bs-font-monospace: var(--mono);

  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--r12);
  --bs-card-bg: var(--white);

  --bs-nav-link-color: var(--ink3);
  --bs-nav-link-hover-color: var(--ink);
}

/* Bootstrap button theme */
.btn-primary {
  --bs-btn-bg: var(--blue-500);
  --bs-btn-border-color: var(--blue-500);
  --bs-btn-hover-bg: var(--blue-400);
  --bs-btn-hover-border-color: var(--blue-400);
  --bs-btn-hover-color: var(--white);
  --bs-btn-active-bg: var(--blue-600);
  --bs-btn-active-border-color: var(--blue-600);
  --bs-btn-disabled-bg: var(--blue-500);
  --bs-btn-disabled-border-color: var(--blue-500);
  font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: var(--blue-500);
  --bs-btn-border-color: var(--blue-500);
  --bs-btn-hover-bg: var(--blue-500);
  --bs-btn-hover-border-color: var(--blue-500);
  --bs-btn-active-bg: var(--blue-600);
  --bs-btn-active-border-color: var(--blue-600);
}

.btn-light {
  --bs-btn-color: var(--blue-600);
  --bs-btn-bg: var(--white);
  --bs-btn-border-color: var(--white);
  --bs-btn-hover-bg: var(--blue-50);
  --bs-btn-hover-border-color: var(--blue-50);
  --bs-btn-hover-color: var(--blue-600);
  font-weight: 600;
}

.btn-outline-light {
  --bs-btn-color: rgba(255, 255, 255, 0.85);
  --bs-btn-border-color: rgba(255, 255, 255, 0.3);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.45);
  --bs-btn-hover-color: var(--white);
}

/* Hero / dark-surface button aliases → Bootstrap-shaped */
.btn-hero-p {
  --bs-btn-font-family: var(--dm);
  --bs-btn-font-size: 15px;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--blue-400);
  --bs-btn-border-color: var(--blue-400);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--blue-300);
  --bs-btn-hover-border-color: var(--blue-300);
  --bs-btn-padding-x: 1.875rem;
  --bs-btn-padding-y: 0.875rem;
  --bs-btn-border-radius: var(--r12);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  color: var(--bs-btn-color);
  background: var(--bs-btn-bg);
  border: 1px solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn-hero-p:hover {
  color: var(--bs-btn-hover-color);
  background: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  transform: translateY(-2px);
}

.btn-hero-s {
  --bs-btn-font-family: var(--dm);
  --bs-btn-font-size: 15px;
  --bs-btn-font-weight: 500;
  --bs-btn-color: var(--blue-200);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(77, 163, 255, 0.3);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: rgba(77, 163, 255, 0.08);
  --bs-btn-hover-border-color: rgba(77, 163, 255, 0.5);
  --bs-btn-padding-x: 1.875rem;
  --bs-btn-padding-y: 0.875rem;
  --bs-btn-border-radius: var(--r12);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  color: var(--bs-btn-color);
  background: var(--bs-btn-bg);
  border: 1px solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-hero-s:hover {
  color: var(--bs-btn-hover-color);
  background: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

/* Base */
html { scroll-behavior: smooth; }
body {
  font-family: var(--bs-body-font-family);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  line-height: var(--bs-body-line-height);
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--blue-50); }
::-webkit-scrollbar-thumb { background: var(--blue-400); border-radius: 2px; }

/* Utility helpers tied to tokens */
.text-ink { color: var(--ink) !important; }
.text-ink3 { color: var(--ink3) !important; }
.text-ink4 { color: var(--ink4) !important; }
.text-blue { color: var(--blue-500) !important; }
.text-blue-200 { color: var(--blue-200) !important; }
.text-blue-300 { color: var(--blue-300) !important; }
.bg-off { background-color: var(--off) !important; }
.bg-blue-950 { background-color: var(--blue-950) !important; }
.bg-blue-50 { background-color: var(--blue-50) !important; }
.font-syne { font-family: var(--syne) !important; }
.font-mono { font-family: var(--mono) !important; }
.rounded-qz { border-radius: var(--r12) !important; }