/* Bantengcaraka Speedtest — PDIP merah/hitam theme override for Graphite Meter */

:root,
html[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #050505;
  --bg: #0a0203;
  --bg-elevated: #120406;

  --surface-1: #140608;
  --surface-2: #1e0a0d;
  --surface-3: #2a1014;
  --surface-inset: #080102;

  --border-subtle: rgba(255, 90, 110, 0.1);
  --border: rgba(255, 90, 110, 0.16);
  --border-strong: rgba(255, 90, 110, 0.28);

  --text: #fff5f6;
  --text-muted: #d4a8ae;
  --text-soft: #b87a82;
  --text-inverse: #1a0508;

  --brand: #c8102e;
  --brand-strong: #ff3d55;
  --brand-muted: #771124;
  --brand-soft: rgba(200, 16, 46, 0.2);

  --signal: #f6a3b0;
  --signal-strong: #ffb8c2;
  --signal-soft: rgba(246, 163, 176, 0.16);

  --phase-warmup: #b87a82;
  --phase-latency: #f6a3b0;
  --phase-download: #ff5a6e;
  --phase-upload: #c8102e;
  --phase-bidirectional: #e1395a;
  --phase-complete: #ff8a98;

  --ok: #79ad91;
  --warn: #e8b86d;
  --err: #ff8a98;

  --grid-line: rgba(255, 90, 110, 0.06);
  --grid-line-major: rgba(255, 90, 110, 0.12);

  --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(52, 5, 13, 0.55);
  --shadow-float: 0 18px 60px rgba(52, 5, 13, 0.65);
}

[data-theme="light"] {
  --canvas: #fff8f8;
  --bg: #fff0f1;
  --bg-elevated: #ffe8ea;

  --surface-1: #fff0f1;
  --surface-2: #ffe2e5;
  --surface-3: #ffd4d8;
  --surface-inset: #f5d0d5;

  --text: #34050d;
  --text-muted: #771124;
  --text-soft: #9a0c24;

  --brand: #c8102e;
  --brand-strong: #9a0c24;
  --brand-muted: #e1395a;
  --brand-soft: rgba(200, 16, 46, 0.12);
}

html,
body {
  background: var(--canvas) !important;
}

/* Logo PDIP menggantikan glyph default Graphite Meter */
.brand-btn .brand-glyph {
  display: none !important;
}

.brand-btn {
  gap: 10px !important;
}

.brand-btn::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: url("/custom/pdi-logo.svg") center / contain no-repeat;
}

.brand-label {
  color: var(--text) !important;
  letter-spacing: -0.01em;
}

/* Tombol utama & gauge accent merah PDIP */
button[class*="engage"],
.run-btn,
[data-phase="download"] .gauge-fill,
.throughput-chart .series-download {
  --tw-ring-color: var(--brand);
}