/* LSJC on screen — the base every page under public/ links first: the
   self-hosted faces, Reductable's screen palette and the ambient grid.
   This file is the source of truth for the screen palette and fonts; the
   pages add only their own layout. */

/* --- Type system (three families, echoing the card) -----------------------
   Elms Sans      → the name (front hero on the card)
   Space Grotesk  → contact lines / buttons (variable file, covers 400–500)
   Hanken Grotesk → the LSJC wordmark (back of the card; variable file) */
@font-face {
  font-family: 'Elms Sans';
  font-style: normal;
  font-weight: 400 700; /* variable file */
  font-display: swap;
  src: url(/fonts/elms-sans-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin.woff2) format('woff2');
}
/* Leckerli One → the single glyph the Reductable mark is built from (an R in this
   face, counter closed in the app icon). Used only for the "R" of the Reductable
   product link, so a scan of the card ties straight back to the app's logo. */
@font-face {
  font-family: 'Leckerli One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/leckerli-one-latin.woff2) format('woff2');
}

/* --- Palette: Reductable's ACTUAL screen tokens ---------------------------
   Lifted straight from reductable-www `src/styles/global.css` (the zinc + brand
   scales) — these are the real values, NOT card-derived approximations. The
   card's blue-violet field (#1a1d40) and in-gamut lime (#c9d200) are CMYK PRINT
   builds; the web isn't bound by CMYK, so it uses Reductable's real background
   (zinc-800) and neon accent (brand-400). Don't reintroduce the card's colours. */
:root {
  --field: #1e2035;    /* Reductable body background — zinc-800 */
  --surface: #33354a;  /* raised tappable-button surface — zinc-700 (Reductable's
                          own content panels are zinc-900 + a lime-glow border) */
  --lime: #ccff00;     /* neon accent — brand-400 */
  --ink: #f0f1f5;      /* primary text — zinc-100 */
  --secondary: #c8cad4;/* zinc-300 */
  --muted: #9a9caa;    /* muted / cursor-mark dot — zinc-400 */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- Ambient texture, ported from reductable-www (global.css) --------------
   A faint 48px neon grid, radially masked so it's strongest up top and fades
   toward the edges. Fixed + behind content (z-index:-1), pointer-events:none.
   Pure CSS, no motion. Grid line = 204 255 0 (the neon accent #ccff00). */
body::before { /* ambient grid */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgb(204 255 0 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(204 255 0 / 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 95% 55% at 50% 0%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 95% 55% at 50% 0%, #000 25%, transparent 75%);
}