/* ============================================================
   RESEEN SYSTEMS — brand foundation
   Semantic palette: every colour carries one fixed meaning.
     noise    periwinkle   raw / unprocessed / degraded
     signal   lime         recovered / machine-confirmed
     bone     paper        the human operator layer
   ============================================================ */

:root {
  /* substrate */
  --ink:      #0b0d0c;
  --ink-2:    #101412;
  --ink-3:    #182019;
  --ink-line: #262d28;

  --bone:     #e7e5dd;
  --bone-2:   #d6d3c8;
  --chalk:    #f4f3ef;
  --bone-line:#c9c5b8;

  /* text */
  --on-ink:      #ecebe5;
  --on-ink-dim:  #878d87;
  --on-bone:     #141715;
  --on-bone-dim: #676c66;

  /* semantic signal */
  --noise:    #a9a2d2;
  --noise-dk: #6f679c;
  --signal:   #c7e25e;
  --signal-dk:#8ba338;
  --sand:     #c6bca0;
  --forest:   #1d2c28;
  --sage:     #9eba8c;
  --alert:    #e0503a;

  --pad: clamp(20px, 5vw, 76px);
  --rule: 1px;
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--ink);
  color: var(--on-ink);
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv05';
}

img, canvas, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- surfaces ----------
   Components read --fg / --fg-dim / --hair rather than fixed colours, so the
   same card, tick or rule works on ink and on paper without a variant class. */

.s-ink {
  --fg: var(--on-ink); --fg-dim: var(--on-ink-dim); --hair: var(--ink-line);
  --panel-bg: var(--ink-2); --key: var(--signal);
  background: var(--ink); color: var(--fg);
}
.s-bone {
  --fg: var(--on-bone); --fg-dim: var(--on-bone-dim); --hair: var(--bone-line);
  --panel-bg: #efeee9; --key: var(--signal-dk);
  background: var(--bone); color: var(--fg);
}
.s-sand {
  --fg: #1b1d18; --fg-dim: #6a6a5c; --hair: #c2bba4;
  --panel-bg: #e2dcc9; --key: var(--signal-dk);
  background: #dbd5c1; color: var(--fg);
}

/* ---------- type primitives ---------- */

.serif {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  line-height: 1.02;
}

.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
}

/* the brand's label form: a coloured tick, then mono caps.
   Lifted from the identity study — used for every annotation on the site. */
.tick {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim, var(--on-ink-dim));
}
.tick::before {
  content: '';
  width: 5px;
  height: 10px;
  flex: none;
  background: var(--tick, var(--key, var(--signal)));
  transform: translateY(1px);
}
.tick-noise  { --tick: var(--noise); }
.tick-signal { --tick: var(--key, var(--signal)); }
.tick-sand   { --tick: var(--sand); }
.tick-alert  { --tick: var(--alert); }
.s-bone .tick-sand, .s-sand .tick-sand { --tick: #9b8f6d; }

.dim { color: var(--fg-dim, var(--on-ink-dim)); }

/* ---------- panels ---------- */

.plate {
  position: relative;
  background: var(--ink-2);
  border: var(--rule) solid var(--ink-line);
}

/* corner registration marks — technical-plate framing */
.plate-marks span {
  position: absolute;
  width: 9px; height: 9px;
  border: 1px solid var(--ink-line);
  pointer-events: none;
}
.plate-marks span:nth-child(1) { top: -1px;    left: -1px;   border-right: 0; border-bottom: 0; }
.plate-marks span:nth-child(2) { top: -1px;    right: -1px;  border-left: 0;  border-bottom: 0; }
.plate-marks span:nth-child(3) { bottom: -1px; left: -1px;   border-right: 0; border-top: 0; }
.plate-marks span:nth-child(4) { bottom: -1px; right: -1px;  border-left: 0;  border-top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}