:root{
  --app-bg:#f4f7fb;
  --app-top:#ffffff;
  --app-surface:#ffffff;
  --app-surface-2:#f8fafc;
  --app-surface-3:#eef2f7;

  --app-text:#0f172a;
  --app-muted:#64748b;
  --app-line:#d6e0ec;

  --app-primary:#2563eb;
  --app-primary-hover:#1d4ed8;

  --app-card-shadow:0 8px 22px rgba(15,23,42,.08);
  --app-card-gradient:linear-gradient(145deg,#ffffff 0%,#f8fafc 100%);
}

[data-theme="dark"]{
  --app-bg:#020817;
  --app-top:#0f172a;
  --app-surface:#0f162a;
  --app-surface-2:#1e293b;
  --app-surface-3:#0b1324;

  --app-text:#e2e8f0;
  --app-muted:#94a3b8;
  --app-line:#334155;

  --app-primary:#3b82f6;
  --app-primary-hover:#2563eb;

  --app-card-shadow:0 6px 14px rgba(0,0,0,.55);
  --app-card-gradient:linear-gradient(145deg,#1e293b 0%,#0f172a 100%);
}

html,
body{
  background:var(--app-bg);
  color:var(--app-text);
}

body{
  transition:background .18s ease,color .18s ease;
}

header.top{
  background:var(--app-top) !important;
  border-bottom:1px solid var(--app-line) !important;
}

.brand,
h1,h2,h3,h4,
.prop-title{
  color:var(--app-text) !important;
}

.card,
.prop-card,
.prop-section{
  background:var(--app-surface) !important;
  border-color:var(--app-line) !important;
  color:var(--app-text) !important;
  box-shadow:var(--app-card-shadow);
}

.prop-card{
  background:var(--app-card-gradient) !important;
}

.prop-section{
  background:var(--app-surface-2) !important;
}

.chip,
.prop-actions a,
.copy-btn,
.input,
.select,
.textarea,
.table,
.mini-table,
.table th,
.table td,
.mini-table th,
.mini-table td{
  background:var(--app-surface) !important;
  border-color:var(--app-line) !important;
  color:var(--app-text) !important;
}

.table th,
.mini-table th{
  background:var(--app-surface-2) !important;
}

.muted{
  color:var(--app-muted) !important;
}

nav a{
  color:var(--app-text) !important;
}

nav a.active,
nav a:hover{
  background:var(--app-surface-3) !important;
}

.btn,
button.btn{
  background:var(--app-primary) !important;
  border-color:var(--app-primary) !important;
  color:#fff !important;
}

.btn:hover,
button.btn:hover{
  background:var(--app-primary-hover) !important;
  border-color:var(--app-primary-hover) !important;
}

.btn.secondary{
  background:var(--app-surface) !important;
  border-color:var(--app-line) !important;
  color:var(--app-text) !important;
}

.btn.secondary:hover{
  background:var(--app-surface-3) !important;
}

.theme-toggle{
  border:1px solid var(--app-line);
  background:var(--app-surface);
  color:var(--app-text);
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
  font:inherit;
}

.theme-toggle:hover{
  background:var(--app-surface-3);
}
/* Light mode text fixes */
:root:not([data-theme="dark"]) .prop-card,
:root:not([data-theme="dark"]) .prop-card *,
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .card *,
:root:not([data-theme="dark"]) .prop-section,
:root:not([data-theme="dark"]) .prop-section *{
  color:var(--app-text) !important;
}

:root:not([data-theme="dark"]) .muted,
:root:not([data-theme="dark"]) .muted *{
  color:var(--app-muted) !important;
}

:root:not([data-theme="dark"]) .btn,
:root:not([data-theme="dark"]) button.btn{
  color:#fff !important;
}

:root:not([data-theme="dark"]) .btn.secondary,
:root:not([data-theme="dark"]) .prop-actions a,
:root:not([data-theme="dark"]) .chip,
:root:not([data-theme="dark"]) .theme-toggle{
  color:var(--app-text) !important;
}

:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea{
  color:var(--app-text) !important;
}

:root:not([data-theme="dark"]) input::placeholder,
:root:not([data-theme="dark"]) textarea::placeholder{
  color:var(--app-muted) !important;
}