/* ============================================
   ReadPuppy Data-Driven Design System
   datadriven.css ?v=1.0
   Biological OS aesthetic — high contrast,
   clean lines, modular blocks, data clarity.
   ============================================ */

/* ── Extended Design Tokens ───────────────────────────────── */
:root {
  /* Data-driven palette */
  --dd-bg:            #0B0F19;
  --dd-bg-alt:        #111827;
  --dd-surface:       #1F2937;
  --dd-surface-alt:   #273549;
  --dd-border:        #374151;
  --dd-border-light:  #4B5563;
  --dd-text:          #F9FAFB;
  --dd-text-mid:      #D1D5DB;
  --dd-text-muted:    #9CA3AF;
  --dd-text-dim:      #6B7280;

  /* Signal colors */
  --dd-green:         #10B981;
  --dd-green-dim:     #065F46;
  --dd-green-glow:    rgba(16,185,129,0.25);
  --dd-amber:         #F59E0B;
  --dd-amber-dim:     #92400E;
  --dd-amber-glow:    rgba(245,158,11,0.2);
  --dd-red:           #EF4444;
  --dd-red-dim:       #7F1D1D;
  --dd-red-glow:      rgba(239,68,68,0.25);
  --dd-blue:          #3B82F6;
  --dd-blue-dim:      #1E3A5F;
  --dd-blue-glow:     rgba(59,130,246,0.2);
  --dd-cyan:          #06B6D4;
  --dd-cyan-glow:     rgba(6,182,212,0.15);
  --dd-purple:        #8B5CF6;
  --dd-purple-glow:   rgba(139,92,246,0.2);

  /* Mono font for data readouts */
  --dd-mono:          'DM Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Data-driven radii — sharper, more technical */
  --dd-radius:        6px;
  --dd-radius-sm:     4px;
  --dd-radius-lg:     8px;

  /* Glows */
  --dd-shadow:        0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --dd-shadow-lg:     0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  --dd-glow-green:    0 0 12px rgba(16,185,129,0.35), 0 0 4px rgba(16,185,129,0.2);
  --dd-glow-red:      0 0 12px rgba(239,68,68,0.35), 0 0 4px rgba(239,68,68,0.2);
  --dd-glow-blue:     0 0 12px rgba(59,130,246,0.3), 0 0 4px rgba(59,130,246,0.15);
  --dd-glow-amber:    0 0 12px rgba(245,158,11,0.3), 0 0 4px rgba(245,158,11,0.15);
}

/* ── Data-Driven Module Container ─────────────────────────── */
.dd-module {
  background: var(--dd-surface);
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-lg);
  box-shadow: var(--dd-shadow);
  overflow: hidden;
}
.dd-module__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--dd-border);
  background: var(--dd-bg-alt);
}
.dd-module__title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dd-text-muted);
}
.dd-module__status {
  font-family: var(--dd-mono);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid;
}
.dd-module__status--active {
  color: var(--dd-green);
  border-color: var(--dd-green-dim);
  background: rgba(16,185,129,0.08);
}
.dd-module__status--alert {
  color: var(--dd-red);
  border-color: var(--dd-red-dim);
  background: rgba(239,68,68,0.08);
}
.dd-module__body {
  padding: 20px;
}

/* ── Data Label / Value Pairs ─────────────────────────────── */
.dd-data {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dd-data__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dd-text-dim);
}
.dd-data__value {
  font-family: var(--dd-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dd-text);
}

/* ── Toggle Switch (data-driven style) ────────────────────── */
.dd-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.dd-toggle input { opacity: 0; width: 0; height: 0; }
.dd-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--dd-border);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s;
}
.dd-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--dd-text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.dd-toggle input:checked + .dd-toggle__track {
  background: var(--dd-green-dim);
}
.dd-toggle input:checked + .dd-toggle__track::after {
  transform: translateX(18px);
  background: var(--dd-green);
}

/* ── Divider ──────────────────────────────────────────────── */
.dd-divider {
  height: 1px;
  background: var(--dd-border);
  margin: 16px 0;
  border: none;
}

/* ── Transition utility ───────────────────────────────────── */
.dd-transition { transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Responsive base ──────────────────────────────────────── */
@media (max-width: 768px) {
  .dd-module__body { padding: 16px; }
  .dd-module__header { padding: 12px 16px; }
}