/* TTM Bot Pro — Cyber HQ design tokens (single source of truth) */
:root {
  /* Core palette */
  --ttm-bg: #0b0b1a;
  --ttm-bg-2: #06040c;
  --ttm-surface: #110e1c;
  --ttm-surface-2: #1a1529;
  --ttm-surface-3: #221c35;
  --ttm-border: rgba(139, 92, 246, 0.22);
  --ttm-border-subtle: rgba(99, 102, 241, 0.12);
  --ttm-primary: #8b5cf6;
  --ttm-primary-hover: #7c3aed;
  --ttm-primary-light: #a855f7;
  --ttm-blue: #6366f1;
  --ttm-cyan: #22d3ee;
  --ttm-gold: #fbbf24;
  --ttm-gold-soft: rgba(251, 191, 36, 0.14);
  --ttm-gold-border: rgba(251, 191, 36, 0.55);
  --ttm-success: #34d399;
  --ttm-warning: #fbbf24;
  --ttm-danger: #f87171;
  --ttm-text: #f5f3ff;
  --ttm-text-secondary: #c4b5fd;
  --ttm-text-tertiary: #8b7ec8;
  --ttm-muted: #94a3b8;

  /* Spacing (8px grid) */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;

  /* Radii & effects — cyber HUD, still touch-friendly */
  --ttm-radius: 6px;
  --ttm-radius-lg: 8px;
  --ttm-radius-xl: 12px;
  --ttm-shadow: 0 0 0 1px rgba(139, 92, 246, 0.1), 0 8px 24px rgba(0, 0, 0, 0.35);
  --ttm-glow: 0 0 10px rgba(168, 85, 247, 0.22), 0 0 20px rgba(139, 92, 246, 0.08);
  --ttm-modal-glow: 0 0 48px rgba(168, 85, 247, 0.28), 0 0 96px rgba(139, 92, 246, 0.12);

  /* Mission control hierarchy (center + right rail) */
  --mc-head-icon: var(--ttm-primary-light);
  --mc-head-title: var(--ttm-primary-light);
  --mc-head-step: var(--ttm-muted);
  --mc-surface: rgba(15, 15, 46, 0.95);
  --mc-surface-inset: rgba(8, 4, 24, 0.65);
  --mc-accent-primary: var(--ttm-primary-light);
  --mc-accent-terminal: var(--ttm-success);
  --mc-accent-cta-start: #7c3aed;
  --mc-accent-cta-mid: var(--ttm-primary-light);
  --mc-accent-cta-end: #c026d3;
  --mc-border-panel: rgba(124, 58, 237, 0.35);
  --mc-head-font: 'Share Tech Mono', 'Orbitron', monospace;

  --font-display: 'Chakra Petch', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-ui: 'Chakra Petch', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-thai: 'IBM Plex Sans Thai', 'Chakra Petch', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', ui-monospace, monospace;
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;
  --font-display-size: clamp(1.25rem, 2vw + 0.5rem, 1.625rem);
  --font-title-size: 1.0625rem;
  --font-body-size: 0.9375rem;
  --font-caption-size: 0.8125rem;
  --font-label-size: 0.6875rem;

  /* Legacy aliases — keep templates working during migration */
  --bg: var(--ttm-bg);
  --bg2: var(--ttm-bg-2);
  --card: rgba(17, 14, 28, 0.88);
  --card-border: var(--ttm-border);
  --text: var(--ttm-text);
  --muted: var(--ttm-muted);
  --primary: var(--ttm-primary);
  --primary2: var(--ttm-primary-light);
  --accent: var(--ttm-gold);
  --green: var(--ttm-success);
  --red: var(--ttm-danger);
  --radius: var(--ttm-radius-lg);
  --shadow: var(--ttm-shadow);

  --saas-bg: var(--ttm-bg-2);
  --saas-bg-2: var(--ttm-bg);
  --saas-surface: var(--ttm-surface);
  --saas-surface-2: var(--ttm-surface-2);
  --saas-surface-3: var(--ttm-surface-3);
  --saas-border: var(--ttm-border);
  --saas-border-subtle: var(--ttm-border-subtle);
  --saas-text: var(--ttm-text);
  --saas-text-secondary: var(--ttm-text-secondary);
  --saas-text-tertiary: var(--ttm-text-tertiary);
  --saas-primary: var(--ttm-primary);
  --saas-primary-hover: var(--ttm-primary-hover);
  --saas-blue: var(--ttm-blue);
  --saas-gold: var(--ttm-gold);
  --saas-gold-soft: var(--ttm-gold-soft);
  --saas-gold-border: var(--ttm-gold-border);
  --saas-success: var(--ttm-success);
  --saas-warning: var(--ttm-warning);
  --saas-danger: var(--ttm-danger);
  --saas-radius: var(--ttm-radius);
  --saas-radius-lg: var(--ttm-radius-lg);
  --saas-modal-glow: var(--ttm-modal-glow);
}

[data-theme="light"] {
  --ttm-bg: #fafafa;
  --ttm-bg-2: #f4f4f5;
  --ttm-surface: #ffffff;
  --ttm-surface-2: #f4f4f5;
  --ttm-surface-3: #e4e4e7;
  --ttm-border: #e4e4e7;
  --ttm-border-subtle: #f4f4f5;
  --ttm-text: #09090b;
  --ttm-text-secondary: #52525b;
  --ttm-text-tertiary: #71717a;
  --ttm-muted: #71717a;
  --card: rgba(255, 255, 255, 0.95);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  font-size: var(--font-body-size);
  background: var(--ttm-bg);
  color: var(--ttm-text);
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -15%, rgba(168, 85, 247, 0.18), transparent 55%),
    radial-gradient(ellipse 45% 35% at 100% 0%, rgba(34, 211, 238, 0.08), transparent 50%),
    linear-gradient(180deg, #06040c 0%, #0b0b1a 45%, #0a0818 100%);
}

a {
  color: var(--ttm-primary-light);
  text-decoration: none;
  transition: color 0.15s;
}

a:hover {
  color: #fff;
}

.ttm-mono,
code,
.key-box,
.hq-footer__clock,
.hq-stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}