/* ---------------------------------------------------------------------------
   Los Santos RP - design tokens.

   The interface is a set of documents from the city's Office of Vital Records,
   lying on a dark desk while the city runs on behind them. Paper is the only
   surface; the game is the room the desk is in. Nothing here is a dark glass
   panel, because a city clerk does not hand you one.

   Three typographic voices, and the rule between them is literal:

     preprinted   Archivo, expanded, caps    what the form was printed with
     typed        IBM Plex Mono              what somebody entered on it
     prose        IBM Plex Sans              plain-English notes in the margin

   Shared verbatim by rp_loading and rp_ui so every screen reads as one product.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: block;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('fonts/plexsans-var.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-display: block;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/plex-400.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/plex-500.woff2') format('woff2');
  font-weight: 500;
  font-display: block;
}

:root {
  /* --- the room ---------------------------------------------------------- */
  --room:      #0b0c0a;   /* the dark the desk stands in, never pure black */
  --desk:      #1a1b16;   /* desk surface where the lamp reaches it */
  --lamp:      rgba(224, 196, 128, 0.10);

  /* --- the paper --------------------------------------------------------- */
  --stock:     #e3dbc2;   /* manila card stock: warm, but grey-olive, not cream */
  --stock-hi:  #efe9d7;   /* the top sheet, directly under the lamp */
  --stock-2:   #cbc09f;   /* the sheet underneath, and every tab edge */
  --stock-3:   #b3a888;   /* deepest fold */

  /* --- what is written on it --------------------------------------------- */
  --ink:       #191c18;   /* ballpoint black with a green cast */
  --ink-2:     #4e5449;   /* second-rank text */
  --ink-3:     #7d8175;   /* captions, disabled, ruled lines */

  /* --- the three official inks, each with exactly one job ---------------- */
  --canary:    #d9b23c;   /* municipal form yellow: what is selected, now */
  --canary-dp: #a8801d;
  --stamp:     #7e2b26;   /* oxblood rubber stamp: filed, refused, destroyed */
  --verdi:     #2e6155;   /* municipal teal: checked, valid, approved */

  /* rules printed on the form */
  --rule:      rgba(25, 28, 24, 0.22);
  --rule-soft: rgba(25, 28, 24, 0.11);
  --rule-firm: rgba(25, 28, 24, 0.55);

  /* paper fibre, laid over every sheet at low opacity */
  --fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E");

  /* uneven rubber-stamp ink: large soft blobs, not fine noise */
  --inkmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.4 0 0 0 -0.32'/%3E%3C/filter%3E%3Crect width='400' height='200' filter='url(%23r)'/%3E%3C/svg%3E");

  /* a sheet of paper casts a real shadow onto the desk */
  --lift-1: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 22px -8px rgba(0,0,0,.7);
  --lift-2: 0 1px 0 rgba(255,255,255,.34) inset, 0 26px 48px -18px rgba(0,0,0,.82);

  --sheet:   clamp(360px, 27vw, 460px);
  --sheet-w: clamp(440px, 34vw, 580px);

  --gut-x: clamp(26px, 2.4vw, 40px);
  --gut-y: clamp(22px, 2.2vw, 34px);

  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--room);
  color: var(--ink);
  font-family: 'Plex Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   The three voices.
   --------------------------------------------------------------------------- */

/* preprinted: everything the form arrived with */
.pp,
.eyebrow,
.head,
label,
.btn,
.tab,
.ctrl-label,
.charname,
.spawnname,
.stagechip span {
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 112, 'wght' 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* typed: everything a person put on the form */
.data,
.typed,
input,
textarea,
.ctrl-val,
.stepval,
.charmeta,
.charmoney,
.counter,
.stagechip em,
.filetag {
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-variation-settings: normal;
  text-transform: none;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* prose: the plain-English notes, the only voice allowed sentence case */
.sub,
.hint,
.spawnblurb,
.switch {
  font-family: 'Plex Sans', system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

.eyebrow {
  font-size: 10px;
  font-variation-settings: 'wdth' 104, 'wght' 600;
  letter-spacing: 0.19em;
  color: var(--ink-3);
}

.data {
  font-size: 11.5px;
  color: var(--ink-2);
}

.rule { height: 1px; background: var(--rule); border: 0; }

/* Focus is always the canary, always visible, and never subtle. */
:focus-visible {
  outline: 2px solid var(--canary-dp);
  outline-offset: 2px;
}

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