:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa;
  --bg-soft: #ffffff;
  --bg-card: #ffffff;
  --indigo: #00713c;
  --cyan: #00a76f;
  --gold: #eabc00;
  --green: #22c55e;
  --rose: #ff5630;
  --text: #1c252e;
  --text-dim: #536270;
  --border: rgba(99, 115, 129, 0.36);
  --border-strong: rgba(0, 113, 60, 0.58);
  --simple-blue: #00713c;
  --simple-blue-light: #00a76f;
  --code-bg: #f2f7f4;
  --code-border: #a4b8ad;
  --procash-primary: #00a76f;
  --procash-logo-green: #00713c;
  --procash-yellow: #eabc00;
  --procash-paper: #ffffff;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141a21;
  --bg-soft: #1c252e;
  --bg-card: #1c252e;
  --indigo: #5be49b;
  --cyan: #5be49b;
  --gold: #ffd666;
  --green: #77ed8b;
  --rose: #ffac82;
  --text: #ffffff;
  --text-dim: #919eab;
  --border: rgba(145, 158, 171, 0.20);
  --border-strong: rgba(0, 167, 111, 0.52);
  --simple-blue: #00713c;
  --simple-blue-light: #00a76f;
  --code-bg: #0d1117;
  --code-border: #454f5b;
  --procash-primary: #00a76f;
  --procash-logo-green: #00a76f;
  --procash-yellow: #eabc00;
  --procash-paper: #1c252e;
}

body {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  transition: background-color 180ms ease, color 180ms ease;
}

#sidebar,
.card,
.mode-card,
.scenario-card,
.shot,
footer {
  box-shadow: 0 1px 2px rgba(28, 37, 46, 0.04);
}

html[data-theme="light"] .seq-lifeline::before,
html[data-theme="light"] .seq-col.has-line::before,
html[data-theme="light"] .step-connector {
  background: rgba(99, 115, 129, 0.60);
}

html[data-theme="light"] .card,
html[data-theme="light"] .mode-card,
html[data-theme="light"] .scenario-card,
html[data-theme="light"] .shot,
html[data-theme="light"] .seq-actor,
html[data-theme="light"] .endpoint-box,
html[data-theme="light"] table,
html[data-theme="light"] .alert {
  border-color: rgba(99, 115, 129, 0.38);
}

html[data-theme="light"] thead th,
html[data-theme="light"] tbody td,
html[data-theme="light"] .tabs,
html[data-theme="light"] section,
html[data-theme="light"] footer,
html[data-theme="light"] .sidebar-logo {
  border-color: rgba(99, 115, 129, 0.34);
}

html[data-theme="light"] #sidebar {
  border-right-color: rgba(99, 115, 129, 0.40);
}

.sidebar-logo {
  min-height: 82px;
  padding: 16px 20px;
}

.sidebar-logo img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.procash-wordmark {
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sidebar-badge,
.seq-num {
  background: var(--procash-primary);
}

nav a:hover,
nav a.active {
  color: var(--procash-primary);
  border-left-color: var(--procash-primary);
  background: rgba(0, 167, 111, 0.08);
}

h1,
h2,
h3 {
  background: linear-gradient(135deg, var(--text) 0%, var(--procash-primary) 62%, var(--procash-logo-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-bg {
  background:
    radial-gradient(ellipse at 20% 45%, rgba(0, 167, 111, 0.13) 0%, transparent 58%),
    radial-gradient(ellipse at 82% 18%, rgba(234, 188, 0, 0.09) 0%, transparent 48%);
}

.webhook-box {
  background: linear-gradient(135deg, rgba(0, 167, 111, 0.10), rgba(234, 188, 0, 0.05));
  border-color: rgba(0, 167, 111, 0.38);
}

.copy-btn {
  background: rgba(0, 167, 111, 0.10);
}

.copy-btn:hover,
tbody tr:hover td {
  background: rgba(0, 167, 111, 0.08);
}

html[data-theme="light"] .code-label {
  color: #005f35;
  background: #e5f3eb;
}

html[data-theme="light"] pre code {
  color: #25342d;
}

html[data-theme="light"] .ck { color: #0057a3; }
html[data-theme="light"] .cs { color: #17633a; }
html[data-theme="light"] .cn { color: #9a3412; }
html[data-theme="light"] .cc { color: #536270; }
html[data-theme="light"] .cm { color: #6b21a8; }
html[data-theme="light"] .ce { color: #006b4a; }
html[data-theme="light"] .cf { color: #8a5700; }
html[data-theme="light"] tbody td code { color: #006b4a; }

html[data-theme="dark"] .code-label { color: #c4cdd5; }
html[data-theme="dark"] pre code { color: #dfe3e8; }

.procash-theme-switcher {
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 260;
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-soft) 92%, transparent);
  box-shadow: 0 8px 24px rgba(28, 37, 46, 0.12);
  backdrop-filter: blur(10px);
}

.procash-theme-switcher button {
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.procash-theme-switcher button.active {
  background: var(--procash-primary);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 167, 111, 0.24);
}

html[data-theme="dark"] .procash-wordmark {
  color: #ffffff;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .mode-card,
html[data-theme="dark"] .scenario-card,
html[data-theme="dark"] .shot {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

@media (max-width: 768px) {
  .procash-theme-switcher {
    top: 14px;
    right: 12px;
  }

  .procash-theme-switcher button {
    padding: 7px 9px;
  }
}