/* vers.us — design system entry point
 *
 * This file is the whole contract. Anything a design needs to look on-brand
 * must be reachable from the @import closure below.
 *
 * Scope: tokens only. This system ships colours, gradients, tints, the type
 * scale, the seven real typefaces, and the brand lockup. It does NOT ship
 * components — vers.us is a React Native app and its components don't exist as
 * web code. Build layout and controls yourself using the vocabulary below.
 */

@import url('./fonts/fonts.css');
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/gradients.css');

/* ===== Base =====
 * vers.us is dark-only and every screen sits on the ground gradient — never a
 * flat colour. Poppins is the default face; reach for Saira Condensed only via
 * the header/battle classes in tokens/typography.css. */
html {
  background-color: var(--vs-background-end);
  /* Dark-only product: dark scrollbars/controls, and no grey iOS tap flash —
   * controls style their own pressed states. */
  color-scheme: dark;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--vs-background-end);
  color: var(--vs-text-primary);
  font-family: var(--vs-font-body);
  font-weight: 400;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The viewport-locked ground. iOS Safari does not honour
 * background-attachment: fixed — the gradient gets painted at the top of the
 * document, scrolls away, and snaps to the flat background colour at a hard
 * edge — so the gradient rides a fixed-position layer instead. Same visual
 * contract, every engine. */
body::before {
  content: "";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: var(--vs-gradient-ground);
  pointer-events: none;
}

/* Surfaces sit ON the gradient, so they need their own ground to read as
 * elevated. These two treatments — the fill/border pairings — are the app's
 * real ones.
 *
 * NOTE ON RADIUS: vers.us has no tokenized radius scale. Corner radii are set
 * per-component in the app and range across 8/10/12/14/16/20/24px with no
 * single canonical card value, so `.vs-card` deliberately sets none — pick one
 * in that range and stay consistent within a design. The 20px on
 * `.vs-modal-surface` is the one that IS consistent in the app. Spacing is
 * likewise untokenized; there is no spacing scale to follow. */
.vs-card {
  background-color: var(--vs-card-background);
  border: 1px solid var(--vs-card-border);
}

.vs-modal-surface {
  background: linear-gradient(180deg, var(--vs-modal-surface), var(--vs-modal-surface-dark));
  border: 1px solid var(--vs-modal-border);
  border-radius: 20px;
}

/* ===== Web reading layer =====
 * tokens/*.css stay verbatim copies of the app — this block is the website's
 * own tuning on top of them. The 2026-08 legibility pass moved the text scale
 * and the text-duty accents (violet/live/cyan) into the app tokens themselves,
 * so this layer now holds only the web-specific deltas:
 *  - pink and orange step lighter AS TEXT here because on the web they are
 *    almost purely text; in the app those tokens also draw identity borders
 *    and glows, so the app keeps them saturated;
 *  - card rims and ghost borders get a nudge so surfaces still resolve as
 *    surfaces when the glows fade into a dark room.
 * Display-scale brand moments (the pink hero line) are pinned back to the
 * saturated originals at their call sites — huge bold type never had the
 * night problem. */
:root {
  --vs-accent-pink: #ff82b1;     /* was #ff458b — 8.8:1 as text on the ground */
  --vs-featured-orange: #ffa05c; /* was #ff6b00 — featured GRADIENT keeps #ff6b00 */

  --vs-modal-border: rgba(184, 164, 255, 0.22);  /* was .14 */
  --vs-tint-ghost-border: rgba(255, 255, 255, 0.22); /* was .15 */
}

/* ===== Web reading scale =====
 * tokens/typography.css is the app's scale, verbatim — sized for a phone UI
 * you glance at, not paragraphs you read. On the open web those values run
 * 2–3px small (11px captions, 12px body-small doing paragraph duty), and
 * small type is the other half of the dim-room problem. Reading styles get
 * one web step up; identity styles — headers, buttons, labels, usernames,
 * stats — keep the app's exact metrics. */
.vs-body       { font-size: 15px; }
.vs-body-large { font-size: 17px; }
.vs-body-small { font-size: 13px; }
.vs-body-tiny  { font-size: 11px; }
.vs-caption      { font-size: 12px; }
.vs-caption-bold { font-size: 12px; }

/* Rim light: cards catch the glow on their top edge — the depth cue that keeps
 * surfaces readable as surfaces in a dark room without brightening the fill. */
.vs-modal-surface { border-top-color: rgba(198, 182, 255, 0.32); }

/* Text selection in the brand accent, not the browser's default blue. */
::selection { background: rgba(89, 83, 255, 0.55); color: #fff; }

/* Visitors who ask the OS for more contrast get one more stop. */
@media (prefers-contrast: more) {
  :root {
    --vs-text-primary: #faf9fe;
    --vs-text-secondary: #e4e0f2;
    --vs-text-muted: #d1cce6;
    --vs-modal-border: rgba(184, 164, 255, 0.32);
    --vs-tint-ghost-border: rgba(255, 255, 255, 0.32);
  }
}