/* vc-tokens.css v1.0.0 — Value Compass ecosystem design tokens.
 * Canonical copy: value-invest/static/ecosystem/vc-tokens.css (values = hub static/css/base.css).
 * Vendored byte-identical into sibling repos by scripts/sync-ecosystem.mjs — do not edit copies.
 * Contract: the --vc- prefix is stable. Names are only ever added, never renamed or removed.
 * Market direction follows the Korean convention: up = red, down = blue.
 */
:root {
  color-scheme: light;
  /* brand & tool accent (each tool may override --vc-tool-accent) */
  --vc-brand: #2563eb; --vc-brand-hover: #1d4ed8; --vc-brand-soft: #dbeafe;
  --vc-tool-accent: var(--vc-brand);
  --vc-link: #1d4ed8;
  /* surfaces */
  --vc-bg: #f5f5f5; --vc-surface: #ffffff; --vc-surface-2: #f1f5f9;
  --vc-surface-muted: rgba(148, 163, 184, 0.10);
  --vc-border: #e0e0e0; --vc-border-strong: #cbd5e1;
  --vc-overlay-bg: rgba(15, 23, 42, 0.48);
  /* text */
  --vc-text: #1a1a1a; --vc-text-muted: #666666; --vc-text-faint: #8b93a0;
  /* market direction */
  --vc-up: #b91c1c; --vc-down: #1d4ed8; --vc-flat: #6b7280;
  --vc-up-tint: rgba(220, 38, 38, 0.10); --vc-down-tint: rgba(37, 99, 235, 0.10);
  /* status (independent of market direction) */
  --vc-success: #059669; --vc-warning: #d97706; --vc-danger: #dc2626; --vc-info: #64748b;
  /* shape */
  --vc-radius-sm: 6px; --vc-radius-md: 8px; --vc-radius-lg: 10px; --vc-radius-xl: 12px;
  --vc-space-1: 4px; --vc-space-2: 8px; --vc-space-3: 12px; --vc-space-4: 16px; --vc-space-5: 20px; --vc-space-6: 24px;
  --vc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --vc-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --vc-shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.16);
  --vc-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15);
  /* type */
  --vc-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --vc-font-mono: 'Cascadia Code', 'Consolas', monospace;
  --vc-font-numeric: tabular-nums;
  /* ecosystem bar */
  --vc-bar-h: 40px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --vc-brand: #3b82f6; --vc-brand-hover: #60a5fa; --vc-brand-soft: #1e3a5f;
  --vc-link: #60a5fa;
  --vc-bg: #0f172a; --vc-surface: #1e293b; --vc-surface-2: #273449;
  --vc-surface-muted: rgba(148, 163, 184, 0.14);
  --vc-border: #334155; --vc-border-strong: #475569;
  --vc-overlay-bg: rgba(0, 0, 0, 0.55);
  --vc-text: #e2e8f0; --vc-text-muted: #94a3b8; --vc-text-faint: #64748b;
  --vc-up: #fca5a5; --vc-down: #93c5fd; --vc-flat: #94a3b8;
  --vc-up-tint: rgba(220, 38, 38, 0.18); --vc-down-tint: rgba(37, 99, 235, 0.18);
  --vc-success: #34d399; --vc-warning: #fbbf24; --vc-danger: #f87171; --vc-info: #94a3b8;
  --vc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --vc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
  --vc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50);
  --vc-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.28);
}
/* Auto mode (no explicit light/dark on <html>, e.g. bond-mate "auto", index-popup "system"):
 * follow the OS. Declarations below MUST equal the [data-theme="dark"] block above —
 * scripts/sync-ecosystem.mjs verifies this. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --vc-brand: #3b82f6; --vc-brand-hover: #60a5fa; --vc-brand-soft: #1e3a5f;
    --vc-link: #60a5fa;
    --vc-bg: #0f172a; --vc-surface: #1e293b; --vc-surface-2: #273449;
    --vc-surface-muted: rgba(148, 163, 184, 0.14);
    --vc-border: #334155; --vc-border-strong: #475569;
    --vc-overlay-bg: rgba(0, 0, 0, 0.55);
    --vc-text: #e2e8f0; --vc-text-muted: #94a3b8; --vc-text-faint: #64748b;
    --vc-up: #fca5a5; --vc-down: #93c5fd; --vc-flat: #94a3b8;
    --vc-up-tint: rgba(220, 38, 38, 0.18); --vc-down-tint: rgba(37, 99, 235, 0.18);
    --vc-success: #34d399; --vc-warning: #fbbf24; --vc-danger: #f87171; --vc-info: #94a3b8;
    --vc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --vc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
    --vc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50);
    --vc-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.28);
  }
}
/* <vc-shell> reserves its bar height before the script upgrades it (no layout shift). */
vc-shell { display: block; min-height: var(--vc-bar-h); }
html[data-embed] vc-shell, vc-shell[hidden] { display: none; min-height: 0; }
@media print { vc-shell { display: none; min-height: 0; } }