/* ===========================================================================
   Guarding Machines Lab - the brand primitives, shared by every surface.

   THIS FILE IS THE SOURCE OF TRUTH FOR THE VISUAL SYSTEM. `index.html` links
   it, and `internal/adapter/console/ui/` carries a byte-identical copy because
   //go:embed cannot reach outside its own package directory. The copy is not
   trusted: `TestTheConsoleAndTheSiteShareOneBrandFile` reads THIS file off disk
   at a relative path and fails the build if the two have drifted. Edit this
   one; copy it over the other.

   What belongs here is what both surfaces render identically - the tokens, the
   reset, the body ground, the anchor, the focus ring, the mark, the wordmark
   and the label tracking scale. What does not is anything only one surface has:
   the site's sections and the console's tables stay in their own sheets.

   The site is single-theme by intent - one bone world closing on a dark
   section, every colour painted explicitly so the page never inherits a host
   background. The console layers three theme states on top of these values;
   see `tokens.css` there for why, and BRAND.md's Known drift for the decision.
   =========================================================================== */

:root {
  /* paper, stepping one shade darker per section as the page descends */
  --paper:    #EFEDE6;
  --band-1:   #E7E4DC;
  --band-2:   #E0DCD3;
  --band-3:   #D9D5CB;
  --band-4:   #D2CDC2;

  --ink:      #16171A;
  --ink-body: #3E3D39;
  --ink-mute: #5C5A54;
  --ink-mute2:#5F5D57;
  --ink-mute3:#54524D;
  --ink-mute4:#4E4C47;

  --accent:   #3E3FA6;  /* the mark, and nothing else */
  --ochre:    #8A5310;  /* a way to reach us; and, on the app surface, the way on */

  --rule-1:   #D6D3C9;
  --rule-2:   #CFCBC0;
  --rule-3:   #C8C3B7;
  --rule-4:   #C1BBAE;

  /* The ramp 05 Join is painted from. These five do NOT take a theme: they are
     the brand's dark ground, and the console's dark variant is derived from
     them rather than from a second palette invented for it. */
  --dark:     #16171A;
  --dark-fg:  #EFEDE6;
  --dark-mute:#B4B0A8;
  --dark-mute2:#8E8B84;
  --dark-line:#3A3A38;

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: Newsreader, Georgia, 'Times New Roman', serif;

  /* Height of the site's sticky bar: 40px mark + 14px padding top and bottom +
     1px rule. The hero subtracts it so bar + hero is exactly one screen. If the
     bar's padding or mark size changes, change this with it. */
  --bar-h: 69px;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

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

/* The approved design's helmet specifies a{color:#16171A;text-decoration:none}
   with a #8A5310 hover. The console carried it and the site did not, which is
   why the site's console link rendered a browser underline UNDER its own
   hairline. Stated once here, it is true on both. */
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ochre); }
button, input, select { font: inherit; color: inherit; }

/* Indigo is the mark's colour and nothing else's, so the ring is NOT indigo -
   it is ink, the one token guaranteed to be the strongest thing on its own
   ground in either theme. The ring itself stays: an invisible focus ring is an
   accessibility regression, and trading a real keyboard user for a tidier
   palette would be the wrong trade in any brand. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* --- the mark: a bevelled diamond, hue drifting through indigo ------------- */

.mark { display: block; position: relative; flex: none; }
.mark__outer, .mark__inner { position: absolute; transform: rotate(45deg); }
.mark__outer { inset: 15%; border: 1px solid var(--rule-4); }
.mark__inner {
  inset: 25%;
  border: 4px solid var(--accent);
  box-shadow:
    inset  2px  2px 0 rgba(255,255,255,.55),
    inset -2px -2px 0 rgba(0,0,0,.32),
           2px  2px 0 rgba(255,255,255,.45),
          -2px -2px 4px rgba(0,0,0,.20);
  animation: gm-hue 9s ease-in-out infinite;
}
@keyframes gm-hue {
    0% { border-color: #3E3FA6; }
   25% { border-color: #6B6CD6; }
   50% { border-color: #2B2C77; }
   75% { border-color: #4F50BE; }
  100% { border-color: #3E3FA6; }
}

/* The sizes, and the only thing that changes with them: the bevel is lit by
   fixed offsets, so a smaller diamond needs its light scaled with it. The
   construction, the four indigos and the nine seconds are the same mark
   everywhere. */
.mark--sm { width: 40px; height: 40px; }
.mark--lg { width: 50px; height: 50px; }
.mark--lg .mark__inner { border-width: 6px; }
.mark--ft { width: 44px; height: 44px; }
.mark--ft .mark__inner { border-width: 5px; }

@media (prefers-reduced-motion: reduce) {
  .mark__inner { animation: none; }
}

/* --- the wordmark, and the tracking scale --------------------------------- */

/* BRAND.md publishes the whole scale, and it is the reason these two classes
   live in the shared file rather than in each surface's own sheet:
     .28em wordmark - .2em section eyebrows - .16em nav and links
     .14em names    - .12em data rows
   Untracked mono caps look like a bug, and a scale restated per surface is a
   scale that will be restated slightly differently. */
.wordmark {
  font: 500 10px var(--mono);
  letter-spacing: .28em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark span { color: var(--ink-mute2); }

.eyebrow {
  font: 500 10px var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mute2);
}