/* ============================================================
   Tech Theme — Design Tokens & Visual Overrides
   ============================================================ */

/* ---- Dark Theme (Default) ---- */
:root,
[data-theme="dark"] {
  /* Background layers */
  --c-bg-deep:       #080b16;
  --c-bg-primary:    #0f111d;
  --c-bg-surface:    #161829;
  --c-bg-elevated:   #1e2140;
  --c-bg-hover:      #252849;

  /* Accent — Cyber Cyan */
  --c-accent:            #00d4ff;
  --c-accent-hover:      #33ddff;
  --c-accent-dim:        #0088aa;
  --c-accent-glow:       rgba(0, 212, 255, 0.25);
  --c-accent-glow-strong: rgba(0, 212, 255, 0.45);

  /* Secondary accents */
  --c-purple:       #a855f7;
  --c-purple-glow:  rgba(168, 85, 247, 0.25);
  --c-green:        #22d893;
  --c-green-glow:   rgba(34, 216, 147, 0.25);
  --c-amber:        #f5a623;
  --c-amber-glow:   rgba(245, 166, 35, 0.25);
  --c-rose:         #f43f5e;
  --c-rose-glow:    rgba(244, 63, 94, 0.25);

  /* Semantic */
  --c-success:      var(--c-green);
  --c-warning:      var(--c-amber);
  --c-error:        var(--c-rose);
  --c-info:         var(--c-accent);

  /* Text */
  --c-text-primary:    #e8edf5;
  --c-text-secondary:  #8492a6;
  --c-text-tertiary:   #5a6680;
  --c-text-inverse:    #0f111d;

  /* Borders */
  --c-border:           #1e2a45;
  --c-border-light:     #252f50;
  --c-border-glow:      rgba(0, 212, 255, 0.12);

  /* Surfaces legacy aliases */
  --c-surface:       var(--c-bg-surface);
  --c-surface-hover: var(--c-bg-hover);
  --c-blue:          var(--c-accent);

  /* Accent gradient */
  --gradient-accent: linear-gradient(135deg, #00d4ff 0%, #a855f7 50%, #f43f5e 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(0,212,255,0.08) 0%, rgba(168,85,247,0.06) 100%);

  /* Shadows */
  --shadow-glow-accent: 0 0 20px var(--c-accent-glow), 0 0 60px rgba(0,212,255,0.08);
  --shadow-glow-purple: 0 0 20px var(--c-purple-glow);
  --shadow-glow-green:  0 0 20px var(--c-green-glow);

  /* Background pattern */
  --bg-grid-color: rgba(0, 212, 255, 0.03);
}

/* ---- Light Theme ---- */
[data-theme="light"] {
  --c-bg-deep:       #eef2f7;
  --c-bg-primary:    #f4f7fb;
  --c-bg-surface:    #ffffff;
  --c-bg-elevated:   #ffffff;
  --c-bg-hover:      #eef6ff;

  --c-accent:            #0284c7;
  --c-accent-hover:      #0369a1;
  --c-accent-dim:        #7dd3fc;
  --c-accent-glow:       rgba(2, 132, 199, 0.15);
  --c-accent-glow-strong: rgba(2, 132, 199, 0.30);
  --c-blue:              var(--c-accent);

  --c-purple:       #7c3aed;
  --c-purple-glow:  rgba(124, 58, 237, 0.15);
  --c-green:        #16a34a;
  --c-green-glow:   rgba(22, 163, 74, 0.15);
  --c-amber:        #d97706;
  --c-amber-glow:   rgba(217, 119, 6, 0.15);
  --c-rose:         #e11d48;
  --c-rose-glow:    rgba(225, 29, 72, 0.15);

  --c-text-primary:    #1e293b;
  --c-text-secondary:  #64748b;
  --c-text-tertiary:   #94a3b8;
  --c-text-inverse:    #ffffff;

  --c-border:           #e2e8f0;
  --c-border-light:     #f1f5f9;
  --c-border-glow:      rgba(2, 132, 199, 0.10);

  --shadow-glow-accent: 0 0 15px rgba(2,132,199,0.12);
  --bg-grid-color: rgba(2, 132, 199, 0.04);
}

/* ---- Global overrides ---- */
body {
  background: var(--c-bg-primary);
  color: var(--c-text-primary);
  font-family: "Inter", "SF Pro Display", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Grid pattern background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--bg-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid-color) 1px, transparent 1px);
  background-size: 40px 40px;
}

#app { position: relative; z-index: 1; }

/* ---- Glass panel ---- */
.glass-panel {
  background: linear-gradient(135deg, rgba(22,24,41,0.85), rgba(30,33,64,0.6));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}

[data-theme="light"] .glass-panel {
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,250,252,0.7));
}

/* ---- Accent border glow ---- */
.accent-border {
  border: 1px solid var(--c-border-glow);
  box-shadow: 0 0 12px var(--c-accent-glow);
  transition: box-shadow var(--transition-fast);
}
.accent-border:hover {
  box-shadow: 0 0 24px var(--c-accent-glow-strong);
}

/* ---- Animated status dot ---- */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-text-tertiary);
  transition: background 0.3s;
}
.status-dot.active { background: var(--c-green); box-shadow: 0 0 8px var(--c-green-glow); }
.status-dot.busy   { background: var(--c-accent); animation: dot-pulse 1.2s ease-in-out infinite; }
.status-dot.warn   { background: var(--c-amber); box-shadow: 0 0 8px var(--c-amber-glow); }
.status-dot.error  { background: var(--c-rose); box-shadow: 0 0 8px var(--c-rose-glow); }

@keyframes dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--c-accent-glow); }
  50%      { opacity: 0.4; box-shadow: 0 0 12px var(--c-accent-glow-strong); }
}

/* ---- Skeleton shimmer ---- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--c-bg-surface) 25%, var(--c-bg-hover) 50%, var(--c-bg-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ---- Custom scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-border-light);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-accent-dim); }

/* ---- Focus ring ---- */
*:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Radial progress ring ---- */
.radial-progress {
  --progress: 0;
  --size: 40px;
  --stroke: 3px;
  width: var(--size); height: var(--size);
  position: relative;
}
.radial-progress svg {
  transform: rotate(-90deg);
}
.radial-progress circle {
  fill: none;
  stroke-width: var(--stroke);
}
.radial-progress .track { stroke: var(--c-border); }
.radial-progress .fill  { stroke: var(--c-accent); stroke-linecap: round; transition: stroke-dashoffset 0.5s; }

/* ---- Type scale helpers ---- */
.text-mono { font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace; }
.text-display { font-family: "Space Grotesk", "Inter", "Noto Sans SC", sans-serif; }