/* ===========================================================================
   ogma.css

   Purpose:      The project's single stylesheet. Defines the design tokens and
                 the minimum styling needed for the skeleton to be legible.
   Dependencies: None.
   Status:       First pass, deliberately thin. The terminal visual treatment
                 is a separate piece of work; this exists so that the pages are
                 readable while the deployment pipeline is being proven, and so
                 that there is one place for colour and type to live from the
                 outset rather than being retrofitted.

   The interface commits to a single dark palette rather than supporting a
   light theme, so every colour is declared explicitly.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* Ground and surface. A cold, slightly cyan-shifted black, to sit warm
     amber against a complementary rather than a neutral ground. */
  --surface-void:   #06080A;
  --surface-deep:   #0A0E11;
  --surface-panel:  #10161A;
  --surface-raised: #172025;

  /* Rules and edges */
  --edge-faint:  #1B2429;
  --edge:        #253138;
  --edge-strong: #35464F;

  /* Signal colours. Amber carries identity and emphasis. Cyan is reserved for
     system state, rose exclusively for failure, so that a red mark always
     means the same thing. */
  --amber:        #F5A623;
  --amber-bright: #FFC15E;
  --amber-dim:    #9C6B22;
  --cyan:         #58C8D4;
  --rose:         #E2566F;

  /* Text */
  --ink:       #CDD8DC;
  --ink-quiet: #8A9AA1;
  --ink-faint: #566670;
  --ink-invert:#06080A;

  /* Type */
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-read: Georgia, "Times New Roman", serif;

  --track-wide: 0.09em;
  --measure: 66ch;

  /* Space, on a four pixel base step */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --gutter: 20px;
  --shell-max: 1180px;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-void);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--amber);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: 1.75rem; letter-spacing: 0.02em; text-transform: uppercase; }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

a { color: var(--amber); }
a:hover { color: var(--amber-bright); }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Status bar. The persistent machine identity strip.
   --------------------------------------------------------------------------- */
.statusbar {
  background: var(--surface-void);
  border-bottom: 1px solid var(--edge);
  font-size: 0.6875rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.statusbar__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--space-2) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
}
.statusbar b { color: var(--amber); font-weight: 500; }
.statusbar__sep { color: var(--edge-strong); }

/* ---------------------------------------------------------------------------
   Layouts
   --------------------------------------------------------------------------- */
.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-7);
}

.gate {
  min-height: calc(100vh - 40px);
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
  padding-block: var(--space-7);
}
.gate > * {
  width: 100%;
  max-width: 420px;
  background: var(--surface-panel);
  border: 1px solid var(--edge);
  padding: var(--space-6);
}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--amber-dim);
  margin-bottom: var(--space-2);
}

input[type="text"],
input[type="password"] {
  width: 100%;
  background: var(--surface-void);
  border: 1px solid var(--edge);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  padding: var(--space-3);
}
input:focus { border-color: var(--amber); outline: none; }

button {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--amber);
  background: var(--amber);
  color: var(--ink-invert);
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: var(--amber-bright); }

/* ---------------------------------------------------------------------------
   Messages
   --------------------------------------------------------------------------- */
.messages { list-style: none; margin: 0; padding: var(--space-3) var(--gutter); }
.message {
  border-left: 2px solid var(--edge-strong);
  background: var(--surface-raised);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  font-size: 0.875rem;
}
.message--error { border-left-color: var(--rose); }
.message--success { border-left-color: var(--cyan); }

[role="alert"] { color: var(--rose); }