/* Reset */
*{box-sizing:border-box} html,body{margin:0;padding:0}

/* Light mode (default) */
:root{
  --bg:#ffffff;
  --surface:#f6f8fb;
  --surface-2:#eef2f7;
  --text:#0e1520;
  --muted:#516173;
  --brand:#0b69ff;
  --brand-600:#0957d6;
  --accent:#12b886;
  --danger:#d64545;
  --border:#d7dee9;

  --font-ui: ui-sans-serif,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --h1: clamp(28px,3vw,40px);
  --h2: clamp(22px,2.2vw,28px);
  --h3: clamp(18px,1.8vw,22px);
  --base:16px; --small:14px;
  --r:14px; --r-lg:18px;
  --shadow:0 6px 20px rgba(16,24,40,.08);
  --gap:16px; --gap-lg:24px; --maxw:1080px;
}
:root.dark{
  --bg:#0b0f14;
  --surface:#111823;
  --surface-2:#151e2b;
  --text:#e8eef7;
  --muted:#9fb2c9;
  --brand:#3aa3ff;
  --brand-600:#2a8ee6;
  --accent:#75e3a2;
  --danger:#ff6b6b;
  --border:#223044;
}

@media (prefers-color-scheme: dark){
  /* use system dark if user hasn't toggled explicitly */
  :root:not(.light){ color-scheme:dark; }
}

body{
  font-family:var(--font-ui);
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

.container{width:min(100%,var(--maxw));margin-inline:auto;padding:24px}
h1{font-size:var(--h1);margin:0 0 12px}
h2{font-size:var(--h2);margin:24px 0 12px}
h3{font-size:var(--h3);margin:20px 0 10px}
p,li{font-size:var(--base)}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-600);text-decoration:underline}
.hr{height:1px;background:var(--border);border:0;margin:24px 0}

/* Base inputs */
.input, .textarea, .select {
  background: #fff;
  color: #0e1520;
}

/* Dark theme overrides */
:root.dark .input,
:root.dark .textarea,
:root.dark .select {
  background: #0f1724;   /* dark surface */
  color: #e8eef7;        /* light text */
  border-color: #223044; /* dark border token */
}

/* Placeholder contrast */
.input::placeholder, .textarea::placeholder { color: #8fa0b5; }
:root.dark .input::placeholder, :root.dark .textarea::placeholder { color: #9fb2c9; }

/* Specific textarea support for dark mode */
:root.dark #textInput { background:#0f1724; color:#e8eef7; }