/* QBIS design tokens — shared by the landing page and the app.
   Theme follows the device; html[data-theme="light|dark"] overrides it (toggle). */
:root {
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Manrope", system-ui, sans-serif;
  --r-xs: 6px; --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: 140ms; --t-med: 240ms; --t-slow: 420ms;
  --header-h: 64px; --footer-h: 34px; --rail-w: 252px; --rail-w-collapsed: 76px; --tabbar-h: 64px;

  /* light */
  --canvas: #eef3f1;
  --canvas-2: #e4ece9;
  --surface: #ffffff;
  --surface-2: #f6f9f8;
  --surface-glass: rgba(255, 255, 255, .72);
  --line: #d7e2de;
  --line-strong: #bccbc6;
  --ink: #0e2621;
  --ink-2: #33504a;
  --muted: #5e7570;
  --primary: #0f7a5c;
  --primary-2: #12a37a;
  --primary-ink: #ffffff;
  --primary-wash: #dcf1e9;
  --accent: #e09a12;
  --accent-wash: #fbefd5;
  --indigo: #4053c9;
  --indigo-wash: #e5e8fb;
  --danger: #c8432a;
  --danger-wash: #fbe6e1;
  --violet: #7a4bd0;
  --violet-wash: #efe8fb;
  --shadow-1: 0 1px 2px rgba(14, 38, 33, .06), 0 1px 1px rgba(14, 38, 33, .04);
  --shadow-2: 0 10px 30px -12px rgba(14, 38, 33, .22), 0 2px 6px rgba(14, 38, 33, .06);
  --shadow-3: 0 30px 60px -20px rgba(14, 38, 33, .35);
  --glow: 0 0 0 0 transparent;
  --focus: 0 0 0 3px rgba(18, 163, 122, .35);
  --grid-head: #eef3f1;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0b1a16; --canvas-2: #0e211c; --surface: #11241f; --surface-2: #152c26; --surface-glass: rgba(17, 36, 31, .72);
    --line: #22413a; --line-strong: #2f5249; --ink: #e6f2ee; --ink-2: #bcd2cb; --muted: #8fa9a2;
    --primary: #3cc79a; --primary-2: #5fe0b3; --primary-ink: #052019; --primary-wash: rgba(60, 199, 154, .14);
    --accent: #f5b83d; --accent-wash: rgba(245, 184, 61, .14); --indigo: #8c9bff; --indigo-wash: rgba(140, 155, 255, .14);
    --danger: #ff8a70; --danger-wash: rgba(255, 138, 112, .14); --violet: #b597ff; --violet-wash: rgba(181, 151, 255, .14);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 14px 34px -14px rgba(0, 0, 0, .7); --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .8);
    --glow: 0 0 24px -6px rgba(60, 199, 154, .45); --focus: 0 0 0 3px rgba(95, 224, 179, .4); --grid-head: #152c26;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0b1a16; --canvas-2: #0e211c; --surface: #11241f; --surface-2: #152c26; --surface-glass: rgba(17, 36, 31, .72);
  --line: #22413a; --line-strong: #2f5249; --ink: #e6f2ee; --ink-2: #bcd2cb; --muted: #8fa9a2;
  --primary: #3cc79a; --primary-2: #5fe0b3; --primary-ink: #052019; --primary-wash: rgba(60, 199, 154, .14);
  --accent: #f5b83d; --accent-wash: rgba(245, 184, 61, .14); --indigo: #8c9bff; --indigo-wash: rgba(140, 155, 255, .14);
  --danger: #ff8a70; --danger-wash: rgba(255, 138, 112, .14); --violet: #b597ff; --violet-wash: rgba(181, 151, 255, .14);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 14px 34px -14px rgba(0, 0, 0, .7); --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .8);
  --glow: 0 0 24px -6px rgba(60, 199, 154, .45); --focus: 0 0 0 3px rgba(95, 224, 179, .4); --grid-head: #152c26;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--font-ui); color: var(--ink); background: var(--canvas); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -.015em; }
a { color: var(--primary); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* shared buttons */
.btn { --b: var(--surface); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--b); color: var(--ink); font-weight: 650; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform var(--t-fast) var(--ease), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med); -webkit-tap-highlight-color: transparent; }
.btn:hover { border-color: var(--ink-2); }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-color: transparent; color: var(--primary-ink); box-shadow: var(--shadow-1), var(--glow); }
.btn.primary:hover { box-shadow: var(--shadow-2), var(--glow); filter: brightness(1.04); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); background: var(--danger-wash); }
.btn.sm { min-height: 32px; padding: 4px 11px; font-size: .875rem; border-radius: var(--r-xs); }
.btn.lg { min-height: 50px; padding: 12px 24px; font-size: 1.02rem; border-radius: var(--r-m); }
.btn.icon { padding: 0; width: 40px; min-height: 40px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}