/* Q-Road design tokens — single source for app-redesign 3-column shell
   Canonical values: docs/images/mockups/app-redesign-home-3col-preview.css
   Spec: issues/feat-app-redesign-p0-design-tokens.md
   Phase P0: define only — existing CSS does not reference these yet. */

:root {
  /* Background & surfaces */
  --qr-bg: #0a0e17;
  --qr-surface: #141d30;
  --qr-surface-2: #18223a;
  --qr-rail-bg: #0d1526;

  /* Borders */
  --qr-border: rgba(148, 163, 184, 0.16);
  --qr-border-strong: rgba(148, 163, 184, 0.28);

  /* Text */
  --qr-text: #f1f5f9;
  --qr-text-2: #94a3b8;
  --qr-text-3: #64748b;

  /* Accent */
  --qr-brand: #38bdf8;
  --qr-brand-deep: #0284c7;
  --qr-gold: #fbbf24;
  --qr-orange: #fb923c;

  /* Spacing */
  --qr-s1: 4px;
  --qr-s2: 8px;
  --qr-s3: 12px;
  --qr-s4: 16px;
  --qr-s5: 24px;

  /* Shape & shell */
  --qr-radius: 14px;
  --qr-rail-w: 220px;
  --qr-side-w: 320px;
}

body[data-theme="light"] {
  --qr-bg: #f0f2f5;
  --qr-surface: #ffffff;
  --qr-surface-2: #f8fafc;
  --qr-rail-bg: #e2e8f0;
  --qr-border: rgba(15, 23, 42, 0.1);
  --qr-border-strong: rgba(15, 23, 42, 0.18);
  --qr-text: #0f172a;
  --qr-text-2: #475569;
  --qr-text-3: #64748b;
  --qr-brand: #0284c7;
  --qr-brand-deep: #0369a1;
  --qr-gold: #d97706;
  --qr-orange: #ea580c;
}