/* ─────────────────────────────────────────
   Phantom UI — Dark Terminal Theme
   ───────────────────────────────────────── */

/* ── Design tokens ── */
:root {
  /* Backgrounds — slightly blue-tinted darks instead of pure black/charcoal */
  --ph-bg-root:     #0d0d12;
  --ph-bg-surface:  #16161e;
  --ph-bg-raised:   #1e1e2a;
  --ph-bg-overlay:  rgba(22, 22, 30, 0.88);

  /* Primary accent — teal-mint (shifted ~20° from pure cyan) */
  --ph-accent:         #00e5d4;
  --ph-accent-dim:     rgba(0, 229, 212, 0.13);
  --ph-accent-border:  rgba(0, 229, 212, 0.32);
  --ph-accent-glow:    rgba(0, 229, 212, 0.28);

  /* Secondary accent — lime-green (shifted from pure #00ff00) */
  --ph-green:        #50fa7b;
  --ph-green-dim:    rgba(80, 250, 123, 0.11);

  /* Text */
  --ph-text:         #e8e8f0;
  --ph-text-muted:   #8888aa;
  --ph-text-accent:  #00e5d4;

  /* Status */
  --ph-danger:   #ff4d6d;   /* pink-red instead of flat red  */
  --ph-warning:  #ffb700;   /* amber instead of yellow       */
  --ph-success:  #00e5a0;   /* teal-green instead of #00ff9d */
  --ph-info:     #7b9fff;   /* periwinkle                    */

  /* Borders */
  --ph-border:        rgba(255, 255, 255, 0.07);
  --ph-border-accent: rgba(0, 229, 212, 0.32);

  /* Progress */
  --ph-track: #222230;
  --ph-fill:  #00e5d4;

  /* Typography */
  --ph-font-mono: 'Fira Code', 'Cascadia Code', monospace;
  --ph-font-sans: 'Inter', 'Segoe UI', sans-serif;
}

/* ── Base ── */
.ph-theme,
.ph-theme * {
  box-sizing: border-box;
}

.ph-theme {
  background-color: var(--ph-bg-root);
  color:            var(--ph-text);
  font-family:      var(--ph-font-sans);
}

/* ── Card / Panel ── */
.ph-card {
  background:    var(--ph-bg-surface);
  border:        1px solid var(--ph-border);
  border-radius: 10px;
  padding:       1.5rem;
  transition:    border-color 0.2s;
}

.ph-card:hover {
  border-color: var(--ph-border-accent);
}

/* ── Headings ── */
.ph-heading {
  font-family: var(--ph-font-mono);
  color:        var(--ph-accent);
  text-shadow:  0 0 14px var(--ph-accent-glow);
}

/* ── Text utilities ── */
.ph-text-accent { color: var(--ph-accent); }
.ph-text-green  { color: var(--ph-green);  }
.ph-text-muted  { color: var(--ph-text-muted); }

/* ── Badges ── */
.ph-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            0.35rem;
  padding:        0.22rem 0.7rem;
  border-radius:  9999px;
  font-family:    var(--ph-font-mono);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.06em;
}

.ph-badge-pending {
  background: rgba(255, 77, 109, 0.15);
  color:      var(--ph-danger);
  border:     1px solid rgba(255, 77, 109, 0.38);
}

.ph-badge-success {
  background: rgba(0, 229, 160, 0.11);
  color:      var(--ph-success);
  border:     1px solid rgba(0, 229, 160, 0.33);
}

.ph-badge-warning {
  background: rgba(255, 183, 0, 0.11);
  color:      var(--ph-warning);
  border:     1px solid rgba(255, 183, 0, 0.33);
}

.ph-badge-info {
  background: rgba(123, 159, 255, 0.11);
  color:      var(--ph-info);
  border:     1px solid rgba(123, 159, 255, 0.33);
}

/* ── Checklist ── */
.ph-checklist-item {
  display:       flex;
  align-items:   flex-start;
  gap:           0.75rem;
  padding:       0.75rem 0;
  border-bottom: 1px solid var(--ph-border);
}

.ph-checkbox {
  width:         17px;
  height:        17px;
  border:        2px solid var(--ph-accent-border);
  border-radius: 3px;
  background:    transparent;
  flex-shrink:   0;
  cursor:        pointer;
  appearance:    none;
  -webkit-appearance: none;
  margin-top:    3px;
}

.ph-checkbox:checked {
  background:   var(--ph-accent);
  border-color: var(--ph-accent);
}

/* ── Progress bar ── */
.ph-progress-wrap {
  width:         100%;
  height:        5px;
  background:    var(--ph-track);
  border-radius: 9999px;
  overflow:      hidden;
}

.ph-progress-bar {
  height:        100%;
  background:    var(--ph-fill);
  border-radius: 9999px;
  transition:    width 0.4s ease;
  box-shadow:    0 0 10px var(--ph-accent-glow);
}

/* ── Nav ── */
.ph-nav-link {
  font-family:     var(--ph-font-mono);
  color:           var(--ph-text-muted);
  text-decoration: none;
  padding-bottom:  4px;
  transition:      color 0.2s;
}

.ph-nav-link.active,
.ph-nav-link:hover {
  color:         var(--ph-accent);
  border-bottom: 2px solid var(--ph-accent);
}

/* ── Section pill ── */
.ph-section-pill {
  display:       inline-block;
  padding:       0.18rem 0.9rem;
  border:        1px solid var(--ph-accent-border);
  border-radius: 9999px;
  font-family:   var(--ph-font-mono);
  font-size:     0.72rem;
  color:         var(--ph-accent);
  background:    var(--ph-accent-dim);
}

/* ── Glow utilities ── */
.ph-glow         { box-shadow: 0 0 18px var(--ph-accent-glow); }
.ph-glow-green   { box-shadow: 0 0 18px rgba(80, 250, 123, 0.25); }
.ph-glow-danger  { box-shadow: 0 0 18px rgba(255,  77, 109, 0.25); }
.ph-glow-warning { box-shadow: 0 0 18px rgba(255, 183,   0, 0.25); }