/* =====================================================================
   RVRN App v2 — design tokens
   Extracted from the v2 prototype (V0.2.1) and kept as single source of truth.
   ===================================================================== */
:root {
  /* colour */
  --red: #d00a07;
  --red-soft: #fbefee;
  --ink: #0a0a0a;
  --muted: #777;
  --muted-2: #888;
  --line: #e4e4e4;
  --line-2: #e9e9e9;
  --paper: #f5f5f7;
  --white: #fff;
  --black: #111;

  /* spacing scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --space: 24px;

  --radius: 3px;
  --radius-2: 2px;
  --tap-min: 48px;

  --shadow-pop: 0 18px 40px rgba(0, 0, 0, 0.22);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* device frame (desktop preview) */
  --device-w: 390px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: #ececed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- typography primitives ---------- */
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.5;
}

.greeting {
  font-size: 29px;
  letter-spacing: -1px;
  line-height: 1.15;
  font-weight: 600;
  margin: var(--s2) 0 10px;
}

.app-title {
  font-size: 30px;
  letter-spacing: -1.2px;
  font-weight: 600;
  margin: 7px 0 var(--s3);
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 12px;
  line-height: 1.7;
}

.tiny {
  font-size: 10px;
  line-height: 1.6;
}

.mono {
  font-family: var(--font-mono);
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}