/* Digital Position portal — styled per DP Brand Book (canonical 01/22/26).
   DM Sans exclusively. Color variables verbatim from the book's :root.
   Display 600 @ ls -4% · body lh 160% @ ls -2% · buttons 500 @ radius .75rem
   · cards ~1rem · soft 4px grid · sentence case, green single-word accents. */

:root {
  /* brand tokens (book, "Color Variables") */
  --neutral-100: #F4F1E6;
  --neutral-200: #E1DED6;
  --neutral-300: #CFC7C0;
  --neutral-500: #7E7D7E;
  --neutral-700: #303030;
  --neutral-800: #1C1C20;
  --neutral-900: #07070F;
  --navy: #2C345B;
  --blue: #4CA9E9;
  --green: #19C798;
  --gold: #F4C085;
  --purple: #A264F8;
  --red: #CE6262;

  /* light mode mapping (book: neutral-100 canvas/surfaces, 300 subtle borders,
     500 muted, 800 body, 900 headings/primary ink) */
  --bg: var(--neutral-100);
  --card: var(--neutral-100);
  --border: var(--neutral-300);
  --chip: var(--neutral-200);
  --ink: var(--neutral-900);
  --text: var(--neutral-800);
  --muted: var(--neutral-500);
  --input-bg: #ffffff;
  --logo: url("/logo-light.svg");
}
@media (prefers-color-scheme: dark) {
  :root {
    /* dark mode (book web-design dark: near-black panel, cream type, same green) */
    --bg: var(--neutral-900);
    --card: var(--neutral-800);
    --border: var(--neutral-700);
    --chip: var(--neutral-700);
    --ink: var(--neutral-100);
    --text: var(--neutral-200);
    --muted: var(--neutral-500);
    --input-bg: var(--neutral-900);
    --logo: url("/logo-dark.svg");
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* .card's display:flex must not defeat the hidden attr */
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  font-family: "DM Sans", sans-serif; /* brand: DM Sans, exclusively */
  background: var(--bg); color: var(--text);
  font-size: 1rem; line-height: 160%; letter-spacing: -0.02em;
}
.wrap { width: 100%; max-width: 480px; padding: 24px; }

/* the real lockup (icon square + digitalposition wordmark), light/dark swap */
.logo {
  display: block; height: 32px; aspect-ratio: 2000 / 316; margin: 0 auto 8px;
  background: var(--logo) no-repeat center / contain;
}

h1, h3 { color: var(--ink); font-weight: 600; letter-spacing: -0.04em; }
h3 { font-size: 1.5rem; line-height: 135%; margin: 0; }
.accent { color: var(--green); } /* single-word title accent, default green */
.muted { color: var(--muted); font-size: 0.875rem; }
code {
  background: var(--chip); color: var(--ink);
  padding: 2px 8px; border-radius: 0.5rem; word-break: break-all;
}

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
  padding: 24px; margin: 16px 0; display: flex; flex-direction: column; gap: 12px;
}

label { display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; color: var(--muted); }
input {
  padding: 12px; border: 1px solid var(--border); border-radius: 0.75rem;
  background: var(--input-bg); color: var(--ink);
  font-family: inherit; font-size: 1rem; letter-spacing: -0.02em;
}
input:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }

button {
  padding: 12px 16px; border: 1px solid transparent; border-radius: 0.75rem;
  background: var(--green); color: #fff;
  font-family: inherit; font-size: 1rem; font-weight: 500; letter-spacing: -0.02em;
  cursor: pointer; transition: all 0.35s ease-in-out;
}
button:hover { filter: brightness(0.92); }
button.secondary {
  background: none; border-color: var(--neutral-800); color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  button.secondary { border-color: var(--neutral-300); }
}
button.secondary:hover { background: var(--chip); filter: none; }
button.link {
  background: none; border: none; color: var(--green); padding: 4px; font-weight: 500;
}
button.link:hover { text-decoration: underline; filter: none; }
button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.inline { display: flex; gap: 8px; }
.inline button { flex: 1; }
.msg { margin: 4px 0 0; font-size: 0.875rem; }
.msg.error { color: var(--red); }
strong { color: var(--ink); font-weight: 600; }