/* Vuerso Bridge — design tokens shared by the setup page and the dashboard.
   Light by default, dark under prefers-color-scheme; force either with :root[data-theme="light|dark"].
   Values follow Figma UI3 so the site, the dashboard and the plugin window read as one product.
   Fonts: self-hosted subsets in fonts/ (Inter variable 400–600, JetBrains Mono 500 ASCII), SIL OFL. */

@font-face { font-family: 'VB Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/inter-var-latin.woff2) format('woff2'); }
@font-face { font-family: 'VB Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/jetbrains-mono-500-ascii.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f5f5f5;
  --bg-3: #e6e6e6;
  --text: rgba(0, 0, 0, 0.9);
  --text-2: rgba(0, 0, 0, 0.56);
  --text-3: rgba(0, 0, 0, 0.36);
  --border: #e6e6e6;
  --brand: #0d99ff;
  --brand-hover: #007be5;
  --brand-soft: #e5f4ff;
  --on-brand: #ffffff;
  --success: #14ae5c;
  --text-success: #009951;
  --danger: #f24822;
  --text-danger: #dc3412;
  --danger-soft: #fff1ee;
  --warning: #ffcd29;
  --win: #ffffff;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);

  --sans: 'VB Inter', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'VB Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #1e1e1e;
    --bg-2: #2c2c2c;
    --bg-3: #383838;
    --text: #ffffff;
    --text-2: rgba(255, 255, 255, 0.64);
    --text-3: rgba(255, 255, 255, 0.4);
    --border: #383838;
    --brand: #0c8ce9;
    --brand-hover: #0a6dc2;
    --brand-soft: #2c3a52;
    --success: #198f51;
    --text-success: #79d297;
    --danger: #e03e1a;
    --text-danger: #fca397;
    --danger-soft: #4f2a22;
    --win: #2c2c2c;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #1e1e1e;
  --bg-2: #2c2c2c;
  --bg-3: #383838;
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.64);
  --text-3: rgba(255, 255, 255, 0.4);
  --border: #383838;
  --brand: #0c8ce9;
  --brand-hover: #0a6dc2;
  --brand-soft: #2c3a52;
  --success: #198f51;
  --text-success: #79d297;
  --danger: #e03e1a;
  --text-danger: #fca397;
  --danger-soft: #4f2a22;
  --win: #2c2c2c;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.45);
}