/* ============================================================
   Fyld — Base
   Light-touch resets + signature surface utilities. Components
   reference semantic tokens; this layer wires the defaults.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--surface-app);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--system); text-decoration: none; }
a:hover { color: var(--system-hover); }

::selection { background: var(--molten-soft); }

/* ---- Signature: the engineered background grid ----
   A faint surveyor's grid, masked so it fades into the surface.
   Use behind heroes / command shells. */
.fyld-grid-bg {
  position: relative;
}
.fyld-grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  opacity: 0.5;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0, #000, transparent 80%);
}
.fyld-grid-bg > * { position: relative; z-index: 1; }

/* ---- Eyebrow / mono label ---- */
.fyld-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---- Registration ticks — corner crop marks on framed blocks ---- */
.fyld-ticks { position: relative; }
.fyld-ticks::before,
.fyld-ticks::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--steel);
  opacity: 0.6;
}
.fyld-ticks::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.fyld-ticks::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ---- Elevation & interactive surfaces ----
   Light-mode depth: a layered shadow at rest, a confident lift on hover.
   Panels stop reading as flat cards and start reading as objects you can act on. */
.fyld-raise {
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fyld-raise:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover), 0 0 0 1px var(--border-strong);
}

/* List rows that answer the pointer — unmistakable "this is clickable" feedback. */
.fyld-row {
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.fyld-row:hover { background: var(--surface-inset); }
.fyld-row:active { background: var(--paper-2); }

/* ---- Mount reveal — content rises into place instead of blinking on. ---- */
@keyframes fyld-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.fyld-reveal { animation: fyld-rise 0.5s var(--ease-out) both; }

/* ---- Engineered field — a faint surveyor's grid behind the whole canvas.
   Gives white cards something to sit *on*, so they read as figure-on-ground. */
.fyld-field { position: relative; }
.fyld-field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000, transparent 75%);
}
.fyld-field > * { position: relative; z-index: 1; }

/* ---- Keyboard focus — visible and on-brand for every interactive element. ---- */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--r-tile);
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}