@import "tailwindcss";

/* ---------------------------------------------------------------------------
   Lumbridge Bench — model evidence lab.

   This is a measurement tool, so it reads like a bench instrument rather than
   a dashboard: near-black panel, hairline rules, tabular figures everywhere,
   and a phosphor palette that carries meaning rather than decoration.

   Colour is semantic and must stay that way:
     signal    (amber)  — our private measurement. The real number.
     reference (cyan)   — public benchmark. Calibration only, never a ranking.
   Anything that dilutes that distinction on screen undermines the whole point
   of the two-tier design. See docs/DECISIONS.md#d5.
--------------------------------------------------------------------------- */

@theme {
  --color-void: #08090b;
  --color-panel: #0d0f13;
  --color-panel-2: #121519;
  --color-rule: #1e232b;
  --color-rule-bright: #2c333d;
  --color-ink: #e8e6e1;
  --color-dim: #79818d;
  --color-dimmer: #4a515b;

  --color-signal: #f2b134;
  --color-signal-dim: #6b4f18;
  --color-reference: #5896ae;
  --color-reference-dim: #23414d;

  --color-pass: #52a86e;
  --color-fail: #cb5a54;

  --font-display: var(--font-instrument), ui-serif, Georgia, serif;
  --font-mono: var(--font-plex-mono), ui-monospace, monospace;
}

:root {
  color-scheme: dark;
}

html {
  background: var(--color-void);
}

body {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  -webkit-font-smoothing: antialiased;
}

/* Graph-paper substrate. Two grids at different scales, like a scope screen,
   plus a vignette so the panel edges fall away rather than ending abruptly. */
.substrate {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--color-void);
  background-image:
    linear-gradient(rgba(120, 140, 160, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 140, 160, 0.028) 1px, transparent 1px),
    linear-gradient(rgba(120, 140, 160, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 140, 160, 0.055) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px;
}

.substrate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 80% at 50% 0%,
    transparent 20%,
    rgba(8, 9, 11, 0.75) 75%,
    var(--color-void) 100%
  );
}

/* Film grain. Keeps large dark fields from banding and gives the panel a
   physical, slightly analogue quality. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Instrument label: the small stamped caps used on panel headings. */
.label {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-dimmer);
}

/* Numbers that should read as a live readout. */
.readout {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Hairline panel. Border colour is deliberately close to the background —
   structure should be felt more than seen. */
.panel {
  background: linear-gradient(180deg, var(--color-panel) 0%, var(--color-void) 100%);
  border: 1px solid var(--color-rule);
}

/* Tick strip used as a section divider — evokes a measurement scale. */
.ticks {
  height: 6px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-rule-bright) 0 1px,
    transparent 1px 9px
  );
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered page-load reveal. One orchestrated entrance rather than scattered
   micro-interactions. */
.rise {
  animation: rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes trace {
  from {
    stroke-dashoffset: var(--trace-len);
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* The throughput curve draws itself like a scope sweep. */
.trace {
  stroke-dasharray: var(--trace-len);
  animation: trace 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.25s both;
}

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

::selection {
  background: var(--color-signal);
  color: var(--color-void);
}