/* Greenwood — Django-rendered pages: the sign-in page, and portal/base.html.

   Mirrors frontend/src/styles/tokens.css by hand, because this file is served
   by Django's staticfiles outside the Vite build. Change both together.
   fonts/public-sans-latin-wght-normal.woff2 is the same file the SPA bundles;
   frontend/src/styles/tokens.test.ts fails if the two copies differ.
   Interaction is ink-led: primary buttons are ink, links are ink and
   underlined, focus is an ink ring. Gold is identity only. */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/public-sans-latin-wght-normal.e4c9b081863a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --ground: #0f1113;
  --panel: #16181b;
  --panel-2: #1b1e22;
  --line: #26292e;
  --line-soft: #20242a;
  --ink: #f3f5f7;
  --ink-2: #aeb4bc;
  --ink-3: #868d96;
  --selected-bg: #f3f5f7;
  --selected-ink: #0f1113;
  --focus: #f3f5f7;
  --green: #4e9c7f; --green-bg: #14231d; --green-line: #2c4a3d;
  --amber: #d9a441; --amber-bg: #241d0f; --amber-line: #4a3c1d;
  --red-text: #d97b70; --red-bg: #241413; --red-line: #4a2723;

  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --text-display: clamp(26px, 4vw, 38px);
  --text-display--line-height: 1.05;
}

* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 var(--font-sans); color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
h1 { font-size: var(--text-display); line-height: var(--text-display--line-height); margin: 0 0 8px; }
h2 { font-size: 16px; margin: 24px 0 12px; }
label { display: block; margin: 0 0 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
input, select, textarea { width: 100%; min-height: 44px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; font: inherit; padding: 8px 12px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--selected-bg); border: 1px solid var(--selected-bg); border-radius: 9px; color: var(--selected-ink); cursor: pointer; font: inherit; font-weight: 600; padding: 8px 16px; text-decoration: none; }
button.secondary, .button.secondary { background: var(--panel-2); border-color: var(--line); color: var(--ink); }
button.danger { background: var(--red-bg); border-color: var(--red-line); color: var(--red-text); }
.errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: var(--red-text); font-size: 12px; }
table { width: 100%; border-collapse: collapse; background: var(--panel); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.messages { list-style: none; margin: 0 0 16px; padding: 0; }
.messages .msg { padding: 10px 12px; border-radius: 9px; margin-bottom: 8px; border: 1px solid var(--line); background: var(--panel-2); }
.messages .success { background: var(--green-bg); border-color: var(--green-line); color: var(--green); }
.messages .warning { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
.messages .error { background: var(--red-bg); border-color: var(--red-line); color: var(--red-text); }

/* portal/base.html chrome (no view renders it today). */
.portal-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 16px; background: var(--ground); border-bottom: 1px solid var(--line); }
.portal-header .brand img { display: block; width: 176px; height: 33px; }
.portal-header .who { color: var(--ink-3); font-size: 12px; }
.portal-header form.logout { display: inline; }
.portal-header form.logout button { min-height: 40px; background: transparent; border-color: transparent; color: var(--ink-2); font-weight: 400; }
.portal-nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.portal-nav a { border-radius: 9px; color: var(--ink-2); padding: 8px 12px; text-decoration: none; white-space: nowrap; }
.portal-nav a[aria-current="page"] { background: var(--panel-2); color: var(--ink); font-weight: 600; }
.portal-main { max-width: 76rem; padding: 24px 16px 48px; }

/* The sign-in page: parent identity, then product, then purpose. */
.portal-login { max-width: 400px; margin: 0 auto; padding: 48px 16px; }
/* The official E100 Houston reference appears unmodified: no border-radius. */
.login-parent { display: block; width: 160px; height: 160px; margin: 0 auto 24px; }
.login-product { font-size: var(--text-display); line-height: var(--text-display--line-height); font-weight: 700; margin: 0; text-align: center; }
.login-tagline { color: var(--ink-3); margin: 4px 0 32px; text-align: center; }
.portal-login form p { margin: 0 0 16px; }
.portal-login button[type="submit"] { width: 100%; margin-top: 8px; }