/* Theme tokens */
:root{
  --sidebar-w: 360px;
  /* Light theme tokens */
  --bg: #f6f7f9;
  --text: #0b1220;
  --panel: #ffffff;
  --muted: #6b7280; /* zinc-500-ish */
  --border: #e5e7eb; /* zinc-200 */
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --pill: rgba(0,0,0,.06);
  --hover: rgba(0,0,0,.04);
  --accent: #0ea5e9; /* sky-500 */
}

html.dark{
  /* Dark theme tokens */
  --bg: #0b0f14;
  --text: #e6edf3;
  --panel: #111827; /* zinc-900 */
  --muted: #8aa0b3;
  --border: #223044;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --pill: rgba(255,255,255,.08);
  --hover: rgba(255,255,255,.06);
  --accent: #38bdf8; /* sky-400 for contrast */
}

/* Base theme application */
html, body{ height:100%; }
body{ background: var(--bg); color: var(--text); }
#app{ height:100%; }

/* Simple card look used across pages */
.card{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.badge{
  background: var(--pill);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 5px 15px;
  font-size: 12px;
}

.option-btn{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.option-btn:hover{ background: var(--hover); }

textarea{
  resize: vertical;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
textarea::placeholder{ color: var(--muted); }
textarea:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* Utilities */
.muted{ color: var(--muted); }
.card, .badge, .option-btn, textarea, body{
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.w-10 {
    width: calc(var(--spacing) * 10);
}

.w-12 {
    width: calc(var(--spacing) * 12);
}

.md\:pt-10 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 10);
    }
  }

  .md\:pt-14 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 14);
    }
  }