/* Shared by index.html and 404.html.
   
   A separate file rather than a <style> block in each page, because there are
   now two pages and one copied stylesheet is the kind of duplication that
   drifts. It also lets the CSP drop 'unsafe-inline' from style-src: with no
   inline styles anywhere on this site, allowing them would be granting a
   capability nothing uses.

   The token VALUES here are copied from app/design-system/tokens rather than
   imported: this site is a different deployment and cannot resolve a custom
   property that lives in the app's bundle. That makes them the same sanctioned
   exception app/CLAUDE.md already names for index.html's theme-color and the
   manifest — copies that must be kept in step by hand. If the design system's
   orange or app background changes, change them here. */

/* Light is the default and dark follows the OS, matching how the app treats
   both as first-class rather than designing for one. */
:root {
  --bg: #f3f6fb;          /* --grey-blue-50, app background light */
  --text: #2a2c2d;        /* --grey-700,     primary text light */
  --brand: #fd7400;       /* --orange-500,   the LINK, the button fill */
  --brand-hover: #e66a00; /* --orange-600,   button hover light */
  --on-brand: #ffffff;
  --font: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;          /* --black-900, app background dark */
    --text: #f9fafb;        /* --white-200, primary text dark */
    --brand-hover: #fd9033; /* --orange-400, button hover dark */
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

/* The wordmark: regular "production", bold orange "LINK". Same treatment as
   the app shell and the sign-in card. */
.wordmark {
  font-size: clamp(32px, 9vw, 56px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.wordmark .production { font-weight: 400; }
.wordmark .link { color: var(--brand); }

/* 404 only. Sits between the wordmark and the button, in the same slot the
   tagline would occupy, so both pages share one vertical rhythm. */
.notice {
  margin: -8px 0 0;
  font-size: 16px;
  opacity: 0.7;
}

/* Mirrors the design system's primary Button: filled brand, 3px radius,
   34px tall, 16px horizontal padding. */
.signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 3px;
  background: var(--brand);
  color: var(--on-brand);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s linear;
}
.signin:hover { background: var(--brand-hover); }
.signin:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .signin { transition: none; }
}