/* public_html/assets/theme.css - site-wide design system. ASCII only.
   One palette expressed as CSS variables; light is the default, dark is
   applied either by an explicit data-theme="dark" (the header toggle) or
   by the OS preference unless the user forced light. Every surface, text,
   and border color in the portal derives from these tokens so light and
   dark stay in lockstep. */
:root {
  color-scheme: light dark;
  --bg:#eef1f7; --surface:#ffffff; --surface-2:#f3f6fc; --surface-3:#e8eef8;
  --text:#131a2b; --muted:#55627a; --faint:#7c88a0;
  --border:#dde3ee; --border-strong:#c7d0e0;
  --accent:#1e57e6; --accent-hover:#1747c0; --accent-fg:#ffffff;
  --accent-soft:#e7eefb;
  --danger:#cf3434; --danger-fg:#ffffff; --danger-soft:#fbe9e9;
  --ok:#12905a; --ok-soft:#e3f5ec;
  --warn:#a86400; --warn-soft:#faf0dd;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(19,26,43,.05), 0 10px 30px rgba(19,26,43,.07);
  --ring:0 0 0 3px rgba(30,87,230,.25);
}
:root[data-theme="dark"] {
  --bg:#0b0f18; --surface:#141b28; --surface-2:#1b2433; --surface-3:#232f42;
  --text:#eaeff8; --muted:#9aa8c1; --faint:#6b788f;
  --border:#283242; --border-strong:#38455c;
  --accent:#5b91ff; --accent-hover:#7aa8ff; --accent-fg:#06101f;
  --accent-soft:#17233a;
  --danger:#ff6b6b; --danger-fg:#170a0a; --danger-soft:#2a1719;
  --ok:#38cf88; --ok-soft:#10241b;
  --warn:#e0a13a; --warn-soft:#241c0f;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.5);
  --ring:0 0 0 3px rgba(91,145,255,.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0b0f18; --surface:#141b28; --surface-2:#1b2433; --surface-3:#232f42;
    --text:#eaeff8; --muted:#9aa8c1; --faint:#6b788f;
    --border:#283242; --border-strong:#38455c;
    --accent:#5b91ff; --accent-hover:#7aa8ff; --accent-fg:#06101f;
    --accent-soft:#17233a;
    --danger:#ff6b6b; --danger-fg:#170a0a; --danger-soft:#2a1719;
    --ok:#38cf88; --ok-soft:#10241b;
    --warn:#e0a13a; --warn-soft:#241c0f;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.5);
    --ring:0 0 0 3px rgba(91,145,255,.35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Shared surface + control primitives. The portal and the marketing front
   page both consume these; portal.css layers page-specific structure. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.btn, button {
  font: inherit; font-weight: 600;
  background: var(--accent); color: var(--accent-fg);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: .55rem .95rem; cursor: pointer;
}
.btn:hover, button:hover { background: var(--accent-hover); text-decoration: none; }
.btn-ghost {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--accent); }
.btn-danger { background: var(--danger); color: var(--danger-fg); border-color: transparent; }
.btn-danger:hover { background: var(--danger); filter: brightness(1.08); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--border); padding: .6rem .7rem; text-align: left; }
.muted { color: var(--muted); }

#theme-toggle {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .4rem .7rem; font-weight: 600;
}
#theme-toggle:hover { color: var(--text); border-color: var(--accent); background: transparent; }

@media (prefers-reduced-motion: no-preference) {
  a, button, .btn, .btn-ghost, .btn-danger, #theme-toggle { transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
}