/* Gewahr design tokens (SIGNA-87). Light theme only (founder decision): no dark mode. Loaded after style.css so the shared scales win.
   Scales: 4px spacing unit; radius 4/8/16/24/full; four named shadows; type 12/14/16/32/40. */
:root {
  --gw-primary-50: #e0f3f8;
  --gw-primary-100: #cde7ee;
  --gw-primary-200: #b5e0e9;
  --gw-primary-300: #99d1de;
  --gw-primary-400: #317a8b;
  --gw-primary-500: #00414f;
  --gw-primary: #005568;
  --gw-accent: #128085;
  --gw-accent-50: #e8f3f6;
  --gw-grey-100: #f9f7f6;
  --gw-grey-200: #f0f0f0;
  --gw-grey-300: #e8e8e8;
  --gw-grey-400: #acacac;
  --gw-grey-500: #575757;
  --gw-grey-600: #3d3d3d;
  --gw-text: #292929;
  --gw-text-muted: #575757;
  --gw-bg: #fafafa;
  --gw-surface: #ffffff;
  --gw-border: #e8e8e8;
  --gw-error: #ab0d2f;
  --gw-error-50: #feecf0;
  --gw-success: #148654;
  --gw-success-50: #e8f6f0;
  --gw-warning: #8a5300;
  --gw-warning-50: #fcf3eb;
  --gw-space: 4px;
  --gw-radius-sm: 4px;
  --gw-radius-md: 8px;
  --gw-radius-lg: 16px;
  --gw-radius-xl: 24px;
  --gw-radius-full: 1024px;
  --gw-shadow-subtle: 0 4px 8px rgba(0, 0, 0, 0.08);
  --gw-shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.1);
  --gw-shadow-card: 0 4px 32px rgba(0, 0, 0, 0.08);
  --gw-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.1);
  --gw-font: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}


/* ---- Base ------------------------------------------------------------------------- */
:root { font-family: var(--gw-font); color: var(--gw-text); background: var(--gw-bg); }
body { background: var(--gw-bg); color: var(--gw-text); font-size: 14px; line-height: 20px; }
p { color: var(--gw-text-muted); font-size: 14px; line-height: 20px; }
h1 { font-size: 40px; line-height: 48px; letter-spacing: -0.02em; color: var(--gw-text); }
h2 { font-size: 20px; line-height: 28px; color: var(--gw-text); }
h3 { font-size: 16px; line-height: 24px; color: var(--gw-text); }
a { color: var(--gw-primary); }
.eyebrow { color: var(--gw-primary-400); font-size: 12px; line-height: 18px; }

.card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius-lg);
  box-shadow: var(--gw-shadow-subtle);
  padding: calc(var(--gw-space) * 6);
}

input, select, textarea {
  border-radius: var(--gw-radius-md);
  border: 1px solid var(--gw-border);
  background: var(--gw-surface);
  color: var(--gw-text);
  font: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--gw-primary);
  outline-offset: 2px;
}
button {
  border-radius: var(--gw-radius-full);
  background: var(--gw-primary);
  border: 1px solid var(--gw-primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
}
button:hover { background: var(--gw-primary-500); border-color: var(--gw-primary-500); }
button.secondary {
  background: var(--gw-surface);
  color: var(--gw-primary);
  border: 1px solid var(--gw-primary-200);
}
button.secondary:hover { background: var(--gw-primary-50); }

/* ---- App shell ------------------------------------------------------------------------ */
header {
  background: var(--gw-surface);
  border-bottom: 1px solid var(--gw-border);
  padding: calc(var(--gw-space) * 3) max(24px, calc((100vw - 1200px) / 2));
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--gw-text); }
.brand img { width: 28px; height: 28px; }
.brand span { color: var(--gw-text-muted); font-weight: 500; font-size: 14px; margin-left: 4px; }
.badge {
  background: var(--gw-primary-50);
  color: var(--gw-primary-400);
  border: 0;
  border-radius: var(--gw-radius-full);
  padding: 6px 12px;
  font-size: 12px;
}

/* ---- Sign-in (split screen) ---------------------------------------------------------- */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: var(--gw-bg); }
.auth[hidden] { display: none; }
.auth-brand {
  background: var(--gw-primary);
  background-image: linear-gradient(160deg, var(--gw-accent) 0%, var(--gw-primary) 55%, var(--gw-primary-500) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gw-space) * 6);
  padding: calc(var(--gw-space) * 10);
}
.auth-logo { display: flex; align-items: center; gap: 20px; }
.auth-logo img { width: 88px; height: 88px; }
.auth-logo span { font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.auth-tagline { color: rgba(255, 255, 255, 0.86); font-size: 18px; line-height: 26px; margin: 0; }
.auth-main { position: relative; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--gw-space) * 10); }
.auth-panel { width: 100%; max-width: 470px; margin: auto; }
.auth-panel h1 { font-size: 40px; line-height: 48px; margin: 0 0 calc(var(--gw-space) * 3); }
.auth-panel .lead { font-size: 18px; line-height: 27px; color: var(--gw-text); margin: 0 0 calc(var(--gw-space) * 10); }
.auth-panel label { display: block; font-size: 12px; line-height: 18px; color: var(--gw-text-muted); margin-bottom: 6px; }
.auth-panel input[type="email"], .auth-panel input[type="text"] {
  width: 100%;
  height: 48px;
  padding: 0 calc(var(--gw-space) * 4);
  font-size: 16px;
  border-radius: var(--gw-radius-lg);
  margin-bottom: calc(var(--gw-space) * 6);
}
.auth-panel button[type="submit"] { width: 100%; height: 44px; font-size: 15px; }
.auth-panel .names { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gw-space) * 3); }
.auth-panel .terms { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--gw-text); margin-bottom: calc(var(--gw-space) * 6); }
.auth-panel .terms input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.auth-panel .link-button {
  background: none; border: 0; color: var(--gw-primary); padding: 0; font-weight: 600; width: auto; height: auto;
}
.auth-panel .link-button:hover { background: none; text-decoration: underline; }
.auth-status { min-height: 20px; font-size: 14px; margin: calc(var(--gw-space) * 4) 0 0; }
.auth-status.error { color: var(--gw-error); }
.auth-note { font-size: 12px; color: var(--gw-text-muted); margin-top: calc(var(--gw-space) * 6); }
.auth-sent { text-align: left; }
.auth-sent .sent-icon {
  width: 48px; height: 48px; border-radius: var(--gw-radius-full); background: var(--gw-primary-50);
  display: grid; place-items: center; margin-bottom: calc(var(--gw-space) * 5);
}
.auth-sent .sent-icon img { width: 26px; height: 26px; }
.auth-footer { position: absolute; right: calc(var(--gw-space) * 10); bottom: calc(var(--gw-space) * 8); font-size: 12px; color: var(--gw-text-muted); }
.auth-footer a { color: var(--gw-text-muted); margin-left: 12px; }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: calc(var(--gw-space) * 8) calc(var(--gw-space) * 5); gap: calc(var(--gw-space) * 3); }
  .auth-logo img { width: 48px; height: 48px; }
  .auth-logo span { font-size: 36px; }
  .auth-tagline { font-size: 15px; }
  .auth-main { padding: calc(var(--gw-space) * 8) calc(var(--gw-space) * 5); }
  .auth-panel h1 { font-size: 30px; line-height: 38px; }
  .auth-panel .lead { font-size: 16px; line-height: 24px; margin-bottom: calc(var(--gw-space) * 7); }
  .auth-footer { position: static; margin-top: calc(var(--gw-space) * 10); text-align: center; }
}

.app-footer { display: flex; gap: 16px; justify-content: center; font-size: 12px; color: var(--gw-text-muted); padding: 32px 0; }
.app-footer a { color: var(--gw-text-muted); }