/* ============================================================
   BRIDGE AI — SHARED DESIGN TOKENS
   Single source of truth for the entire BridgeAI ecosystem.
   Import via: <link rel="stylesheet" href="/bridge-tokens.css">
   ============================================================ */

/* ─── 1. COLORS ─────────────────────────────────────────────── */
:root {
  /* Backgrounds (darkest → lightest) */
  --bg-void:            #000000;
  --bg-0:               #060810;
  --bg-1:               #0a0e17;
  --bg-2:               #111827;
  --bg-3:               #1a1a2e;
  --card-bg:            #111111;
  --bg-elevated:        #1A1A1A;

  /* Primary accent — cyan */
  --cyan:               #63ffda;
  --cyan-soft:          #63ffdacc;
  --cyan-glow:          rgba(99, 255, 218, 0.35);
  --cyan-muted:         rgba(99, 255, 218, 0.12);

  /* Signal — red */
  --signal-red:         #FF0033;
  --signal-red-soft:    #FF1A4D;
  --signal-glow:        rgba(255, 0, 51, 0.35);
  --signal-red-muted:   rgba(255, 0, 51, 0.12);

  /* Text hierarchy */
  --text-primary:       #FFFFFF;
  --text-secondary:     #94a3b8;
  --text-muted:         #666666;

  /* Status */
  --alive:              #00FF88;
  --alive-glow:         rgba(0, 255, 136, 0.35);
  --degraded:           #FFAA00;
  --degraded-glow:      rgba(255, 170, 0, 0.35);
  --offline:            #FF0033;
  --offline-glow:       rgba(255, 0, 51, 0.35);
  --unknown:            #666666;
  --unknown-glow:       rgba(102, 102, 102, 0.25);

  /* Borders */
  --border:             #2A2A2A;
  --border-hover:       #444444;

  /* ─── 2. TYPOGRAPHY ───────────────────────────────────────── */
  --font-ui:            'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:            11px;
  --text-sm:            13px;
  --text-base:          15px;
  --text-lg:            18px;
  --text-xl:            22px;
  --text-2xl:           28px;
  --text-3xl:           36px;
  --text-4xl:           48px;

  --weight-normal:      400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;

  --leading-tight:      1.1;
  --leading-snug:       1.25;
  --leading-normal:     1.5;
  --leading-relaxed:    1.65;

  --tracking-tight:     -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-widest:    0.1em;

  /* ─── 3. SPACING ──────────────────────────────────────────── */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            20px;
  --space-6:            24px;
  --space-8:            32px;
  --space-10:           40px;
  --space-12:           48px;
  --space-16:           64px;

  --gap:                12px;
  --gap-lg:             24px;

  /* ─── 4. BORDERS ──────────────────────────────────────────── */
  --radius-xs:          2px;
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-full:        9999px;

  --border-thin:        1px;
  --border-medium:      2px;

  /* ─── 5. SHADOWS / GLOWS ──────────────────────────────────── */
  --glow-soft:          0 0 6px rgba(255, 255, 255, 0.05);
  --glow-cyan:          0 0 12px var(--cyan-glow), 0 0 24px rgba(99, 255, 218, 0.15);
  --glow-red:           0 0 12px var(--signal-glow), 0 0 24px rgba(255, 0, 51, 0.15);
  --glow-alive:         0 0 8px var(--alive-glow);
  --glow-degraded:      0 0 8px var(--degraded-glow);
  --glow-offline:       0 0 8px var(--offline-glow);

  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:          0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl:          0 12px 40px rgba(0, 0, 0, 0.7);

  /* ─── 6. ANIMATIONS ───────────────────────────────────────── */
  --duration-fast:      100ms;
  --duration-normal:    200ms;
  --duration-slow:      400ms;
  --duration-slower:    600ms;

  --ease-default:       ease;
  --ease-in-out:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:           cubic-bezier(0, 0, 0.2, 1);
  --ease-in:            cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── 7. Z-INDEX SCALE ────────────────────────────────────── */
  --z-base:             0;
  --z-raised:           10;
  --z-dropdown:         100;
  --z-sticky:           200;
  --z-overlay:          300;
  --z-modal:            400;
  --z-popover:          500;
  --z-toast:            600;
  --z-tooltip:          700;
  --z-max:              9999;
}


/* ============================================================
   SHARED UTILITY CLASSES
   ============================================================ */

/* ─── STATUS BADGES ─────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: var(--border-thin) solid transparent;
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

.status-badge.alive {
  color: var(--alive);
  border-color: rgba(0, 255, 136, 0.2);
  background: rgba(0, 255, 136, 0.06);
}

.status-badge.degraded {
  color: var(--degraded);
  border-color: rgba(255, 170, 0, 0.2);
  background: rgba(255, 170, 0, 0.06);
}

.status-badge.offline {
  color: var(--offline);
  border-color: rgba(255, 0, 51, 0.2);
  background: rgba(255, 0, 51, 0.06);
}

.status-badge.unknown {
  color: var(--unknown);
  border-color: rgba(102, 102, 102, 0.2);
  background: rgba(102, 102, 102, 0.06);
}

/* ─── CARD ──────────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--glow-soft);
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

.card:hover {
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan);
}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--cyan);
  background: var(--cyan);
  color: var(--bg-void);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: all var(--duration-normal) var(--ease-default);
}

.btn-primary:hover {
  box-shadow: var(--glow-cyan);
  filter: brightness(1.1);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--border);
  background: var(--bg-2);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: all var(--duration-normal) var(--ease-default);
}

.btn-secondary:hover {
  border-color: var(--cyan-soft);
  color: var(--cyan);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: all var(--duration-normal) var(--ease-default);
}

.btn-ghost:hover {
  border-color: var(--border);
  color: var(--cyan);
}

/* ─── TEXT UTILITIES ────────────────────────────────────────── */
.text-mono {
  font-family: var(--font-mono);
}

.text-ui {
  font-family: var(--font-ui);
}

/* ─── GLOW UTILITIES ───────────────────────────────────────── */
.glow-cyan {
  box-shadow: var(--glow-cyan);
}

.glow-red {
  box-shadow: var(--glow-red);
}