/* The console's shared styles. Public: the sign-in page loads this, so nothing here describes what is behind it.

   Eranos tokens, copied from design/eranos/tokens.css because this function has no static host to import them
   from. The block below is the ONLY place a hex literal may appear (rules D3, D10); everything after it uses the
   custom properties and color-mix(). When tokens.json changes, copy the three colour blocks again. */

/* ---- Eranos tokens: begin ---- */
:root {
  color-scheme: light dark;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --size-touch-min: 44px;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --type-display: 700 40px/44px var(--font-display);
  --type-title: 700 28px/34px var(--font-display);
  --type-heading: 600 20px/26px var(--font-body);
  --type-body: 400 16px/24px var(--font-body);
  --type-body-small: 400 14px/20px var(--font-body);
  --type-label: 600 14px/18px var(--font-body);
  --type-caption: 500 12px/16px var(--font-mono);

  --color-background: #F0EBE3;
  --color-surface: #F8F5EF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-sunken: #E6DED2;
  --color-border: #E1D9CC;
  --color-border-strong: #8A8071;
  --color-text-primary: #17242C;
  --color-text-secondary: #3E5158;
  --color-text-muted: #59686E;
  --color-text-disabled: #94A0A3;
  --color-accent: #1A4FA0;
  --color-accent-foreground: #FFFFFF;
  --color-accent-pressed: #103A75;
  --color-accent-subtle: #DCE6F3;
  --color-focus-ring: #1A4FA0;
  --color-success: #2E6A54;
  --color-warning: #8A5A10;
  --color-danger: #A63822;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #101A22;
    --color-surface: #17222B;
    --color-surface-elevated: #1F2C36;
    --color-surface-sunken: #223039;
    --color-border: #2A3A45;
    --color-border-strong: #66798A;
    --color-text-primary: #EFF3F4;
    --color-text-secondary: #A9BAC2;
    --color-text-muted: #7E9099;
    --color-text-disabled: #5E7078;
    --color-accent: #57C9D6;
    --color-accent-foreground: #06171B;
    --color-accent-pressed: #86DDE6;
    --color-accent-subtle: #12303F;
    --color-focus-ring: #57C9D6;
    --color-success: #6FD3A6;
    --color-warning: #E8B85C;
    --color-danger: #FF9C82;
  }
}
:root[data-theme="dark"] {
  --color-background: #101A22;
  --color-surface: #17222B;
  --color-surface-elevated: #1F2C36;
  --color-surface-sunken: #223039;
  --color-border: #2A3A45;
  --color-border-strong: #66798A;
  --color-text-primary: #EFF3F4;
  --color-text-secondary: #A9BAC2;
  --color-text-muted: #7E9099;
  --color-text-disabled: #5E7078;
  --color-accent: #57C9D6;
  --color-accent-foreground: #06171B;
  --color-accent-pressed: #86DDE6;
  --color-accent-subtle: #12303F;
  --color-focus-ring: #57C9D6;
  --color-success: #6FD3A6;
  --color-warning: #E8B85C;
  --color-danger: #FF9C82;
}
/* ---- Eranos tokens: end ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-background);
  color: var(--color-text-primary);
  font: var(--type-body);
}

h1, h2, h3, p { margin: 0; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 4px;
}

.wordmark {
  font: var(--type-title);
  letter-spacing: 0.25px;
}

.eyebrow {
  font: var(--type-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.field {
  display: grid;
  gap: var(--space-xs);
}

.label {
  font: var(--type-label);
  letter-spacing: 0.2px;
  color: var(--color-text-secondary);
}

input {
  width: 100%;
  min-height: var(--size-touch-min);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  font: var(--type-body);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-touch-min);
  min-width: var(--size-touch-min);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  font: var(--type-label);
  letter-spacing: 0.2px;
  cursor: pointer;
}

.button:hover { background: var(--color-surface-sunken); }

.button.primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-foreground);
}

.button.primary:hover,
.button.primary:active { background: var(--color-accent-pressed); border-color: var(--color-accent-pressed); }

.button:disabled {
  cursor: default;
  border-color: var(--color-border);
  background: var(--color-surface-sunken);
  color: var(--color-text-disabled);
}

.error {
  color: var(--color-danger);
  font: var(--type-body-small);
}

/* the door */
.door {
  display: grid;
  place-items: center;
  padding: var(--space-lg);
}

.door-card {
  width: 100%;
  max-width: 400px;
  display: grid;
  gap: var(--space-sm);
}

.door-card form {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color 120ms ease; }
}