/* Skip Distribution Operations — the one stylesheet.
   Phase 0a trims this to what the auth pages need (design tokens, form
   fields, buttons, flash messages). The full component set (tables, badges,
   modals, nav, page header) arrives in Phase 1's design system.

   ADAPTED from ~/Projects/skip-extraction/core/server/static/css/app.css —
   that file's own header notes it is a *derived* consolidation of six
   templates' duplicated inline <style> blocks. Brand colour values here are
   still placeholders (TODO), pending real branding settings in Phase 0c/1.
   No Google Fonts import — self-hosted fonts only, no CDN, per CLAUDE.md. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --brand-primary: #2B3A4A;      /* TODO: real brand colour, Phase 1 */
  --brand-accent: #3A6EA5;       /* TODO: real accent colour, Phase 1 */
  --brand-accent-hover: #2F5A87;
  --ink: #1a1a1a;
  --body: #3d3d3d;
  --muted: #7a7a7a;
  --bg: #ffffff;
  --card: #ffffff;
  --card-border: #e0dbd4;
  --input-bg: #ffffff;
  --input-border: #ccc6bd;
  --input-focus: var(--brand-primary);
  --error-bg: #fef0ec;
  --error-border: #c0392b;
  --error-text: #c0392b;
  --success-bg: #e6f4ea;
  --success-border: #27a854;
  --success-text: #1a7a3a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-primary: #9DB4CC;
    --brand-accent: #6D9BD1;
    --brand-accent-hover: #5A88BE;
    --ink: #e8e4df;
    --body: #c5c0b8;
    --muted: #8a8580;
    --bg: #0f0e0c;
    --card: #1c1a17;
    --card-border: #333028;
    --input-bg: #252220;
    --input-border: #44403a;
    --error-bg: #2a1810;
    --error-border: #a83820;
    --error-text: #f4724e;
    --success-bg: #1a2e20;
    --success-border: #2a7040;
    --success-text: #5cb87a;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--body);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Auth pages ── */

.auth-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 40px 36px 36px;
  width: 100%;
  max-width: 400px;
  margin: 20px;
}
.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 24px;
  text-align: center;
}
.auth-link {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--brand-primary);
  text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }

/* ── Forms ── */

.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}
.form-group input {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.form-group input:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px rgba(43, 58, 74, 0.15);
}

.form-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 13px;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  color: var(--body);
  cursor: pointer;
}
.form-row-between a {
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 13px;
}
.form-row-between a:hover { text-decoration: underline; }

/* ── Buttons ── */

.btn {
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-accent { background: var(--brand-accent); }
.btn-accent:hover { background: var(--brand-accent-hover); }
.btn-full { width: 100%; }

/* ── Flash messages ── */

.flash-wrap {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  padding: 0 20px;
  z-index: 10;
}
.flash {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 10px;
}
.flash-error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); }
.flash-success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); }