/* =============================================================================
   control_trafico - tokens del diseño bento dark/light (prefijo --ctb-).
   Se cargan junto a inspector.css; no pisan los --ct-* existentes ni los --ds-*
   globales.
   ============================================================================= */
:root {
    --ctb-accent: #FACC15;
    --ctb-accent-ink: #1A1600;
    --ctb-ok: #A3E635;
    --ctb-warn: #FB923C;
    --ctb-bad: #F87171;
    --ctb-info: #7DD3FC;

    --ctb-radius: 18px;
    --ctb-radius-sm: 12px;
    --ctb-radius-xs: 8px;

    --ctb-font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ctb-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Light (default). Dark se activa con [data-theme="dark"] en <html>. */
    --ctb-bg: #F5F5F2;
    --ctb-bg-raised: #EFEFEA;
    --ctb-card: #FFFFFF;
    --ctb-card-2: #FAFAF7;
    --ctb-border: #E6E6DE;
    --ctb-border-strong: #D4D4C8;
    --ctb-ink: #111316;
    --ctb-ink-mid: #56596A;
    --ctb-ink-dim: #8A8D9A;
    --ctb-ink-faint: #D8D9DD;
    --ctb-hair: rgba(0, 0, 0, 0.06);
    --ctb-grid-dot: rgba(0, 0, 0, 0.05);
    --ctb-glow: 0 10px 30px rgba(250, 204, 21, 0.25);
    --ctb-chip-bg: rgba(0, 0, 0, 0.04);
    --ctb-chip-border: rgba(0, 0, 0, 0.07);
    --ctb-map-bg: #EAEAE4;
    --ctb-map-road: #D4D4C8;
    --ctb-map-accent: #BDBDAE;
}

:root[data-theme="dark"] {
    --ctb-bg: #0A0B0F;
    --ctb-bg-raised: #0F1117;
    --ctb-card: #111218;
    --ctb-card-2: #14161E;
    --ctb-border: #1E2029;
    --ctb-border-strong: #2A2D38;
    --ctb-ink: #E9EAEE;
    --ctb-ink-mid: #9AA0AE;
    --ctb-ink-dim: #5C6270;
    --ctb-ink-faint: #363A45;
    --ctb-hair: rgba(255, 255, 255, 0.06);
    --ctb-grid-dot: rgba(255, 255, 255, 0.04);
    --ctb-glow: 0 0 40px rgba(250, 204, 21, 0.12);
    --ctb-chip-bg: rgba(255, 255, 255, 0.04);
    --ctb-chip-border: rgba(255, 255, 255, 0.08);
    --ctb-map-bg: #0B1018;
    --ctb-map-road: #1A2230;
    --ctb-map-accent: #2C3B52;
}