/* REVRST brand foundation.
 *
 * Typography follows the Legora method: ONE variable family for everything, set at
 * off-grid intermediate weights (450 headings, 440 body, 300 for large numerals),
 * with a tracking ramp that tightens as type grows. Large type is set light and
 * tight — never bold.
 *
 * Colour and geometry follow Lunar's restraint with Revolut's token architecture:
 * a named radius scale, a 4px spacing rhythm, and near-flat surfaces separated by
 * hairlines and whitespace rather than shadow. Green is never decorative here — it
 * means "settled", and nothing else.
 */

/* ---------------------------------------------------------------- typeface */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* The type scale is a set of multipliers over one viewport-driven root, which is
     how Legora gets a fluid scale without a clamp() on every individual size. */
  --root: clamp(13.7px, 1.008vw, 16.5px);

  --size-caption: calc(var(--root) * 0.88);
  --size-body: calc(var(--root) * 1);
  --size-lead: calc(var(--root) * 1.5);
  --size-h4: calc(var(--root) * 1.75);
  --size-h3: calc(var(--root) * 2.25);
  --size-h2: calc(var(--root) * 2.75);
  --size-h1: calc(var(--root) * 3.75);
  --size-numeral: calc(var(--root) * 6);

  /* Off-grid weights — only reachable because the face is variable. */
  --wght-display: 300;
  --wght-heading: 450;
  --wght-body: 440;
  --wght-strong: 560;

  /* Tracking tightens as type grows. */
  --track-h1: -0.04em;
  --track-h2: -0.03em;
  --track-h3: -0.02em;
  --track-body: 0em;

  /* Light ground. */
  --bg: #ffffff;
  --surface: #f4f4f4;
  --surface-2: #ececea;
  --line: #dcdcdc;
  --fg: #191c1f;
  --fg-muted: #68655e;
  --fg-faint: #9a9a95;

  /* Accent — indigo-violet, the point where the two references converge. */
  --accent: #6b4eff;
  --accent-press: #5a3fe0;
  --accent-wash: rgba(107, 78, 255, 0.08);

  /* Payment-state semantics. These carry meaning; never use them for decoration.
     A financial state must never be signalled by colour alone, so each pill also
     carries its label — but the label still has to pass AA, which means the hues
     need separate values per ground. These are the on-white set. */
  --state-settled: #14794a;
  --state-pending: #7a5600;
  --state-failed: #bf262c;
  --state-unknown: #5c636b;

  /* Radii — the values Lunar and Revolut share verbatim. */
  --r4: 4px;
  --r8: 8px;
  --r12: 12px;
  --r16: 16px;
  --r24: 24px;
  --r-pill: 9999px;

  /* 4px rhythm. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --module: clamp(56px, 6vw, 96px);

  --container: 1200px;
  --container-wide: 1680px;
  --measure: 62ch;
  --header-h: 81px;

  color-scheme: light;
}

/* The reference site flips theme on scroll; these are the dark tokens it flips to.
   The ladder is Revolut's verified dark surface ramp. */
[data-theme='dark'] {
  --bg: #000000;
  --surface: #161618;
  --surface-2: #1c1c1e;
  --line: #2a2a2d;
  --fg: #f4f4f4;
  --fg-muted: #9a9fa6;
  /* Lifted from #6c7077: the "unknown" state pill renders at caption size, so it
     needs AA for normal text (4.5) against black, not the 4.22 that gave. */
  --fg-faint: #8b9199;
  --accent-wash: rgba(107, 78, 255, 0.16);

  /* The on-black set: the same hues lifted until each clears AA against #000. */
  --state-settled: #3bbb80;
  --state-pending: #d2a03a;
  --state-failed: #e5484d;
  --state-unknown: var(--fg-faint);

  color-scheme: dark;
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
}

/* -------------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--size-body);
  font-weight: var(--wght-body);
  line-height: 1.55;
  font-optical-sizing: auto;
  /* Inter's character variants move it off its default silhouette: cv05 gives the
     tailed l, cv08 the serifed uppercase I, ss03 the rounded quotes. */
  font-feature-settings: 'cv05', 'cv08', 'ss03', 'tnum' 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.6s var(--ease-in-out-quad, ease), color 0.6s var(--ease-in-out-quad, ease);
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: var(--wght-heading);
  text-wrap: balance;
}

h1 { font-size: var(--size-h1); letter-spacing: var(--track-h1); line-height: 1.05; }
h2 { font-size: var(--size-h2); letter-spacing: var(--track-h2); line-height: 1.05; }
h3 { font-size: var(--size-h3); letter-spacing: var(--track-h3); line-height: 1.2; }
h4 { font-size: var(--size-h4); letter-spacing: var(--track-h3); line-height: 1.25; }

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: inherit; text-underline-offset: 0.18em; }

img, svg, video, canvas { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r4);
}

/* Numerals in any financial context must be tabular and unambiguous, so columns of
   amounts align and 0/O cannot be confused. */
.rv-numeric,
[data-amount],
td[class*='amount'],
.amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv05', 'cv08';
}

/* ------------------------------------------------------------------- layout */

.rv-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.rv-container--wide { max-width: var(--container-wide); }

.rv-section { padding-block: var(--module); }

.rv-eyebrow {
  font-size: var(--size-caption);
  font-weight: var(--wght-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.rv-display {
  font-size: var(--size-numeral);
  font-weight: var(--wght-display);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rv-lead {
  font-size: var(--size-lead);
  font-weight: var(--wght-body);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}

/* ------------------------------------------------------------------ surface */

/* Flat by default. Separation comes from a hairline and from space, not shadow —
   Legora ships no box-shadow at all, and Lunar caps it at .18 opacity. */
.rv-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r16);
  padding: var(--s5);
}

.rv-card--quiet {
  background: var(--surface);
  border-color: transparent;
}

/* ------------------------------------------------------------------ buttons */

.rv-btn {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 13px 24px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: var(--wght-strong);
  font-size: var(--size-caption);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-chrome, .25s) var(--ease-in-out-circ, ease),
    color var(--dur-chrome, .25s) var(--ease-in-out-circ, ease),
    border-color var(--dur-chrome, .25s) var(--ease-in-out-circ, ease);
}

.rv-btn--accent { --btn-bg: var(--accent); --btn-fg: #ffffff; }
.rv-btn--accent:hover { --btn-bg: var(--accent-press); }

.rv-btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--line);
}

.rv-btn--secondary:hover { --btn-bg: var(--surface); border-color: var(--fg-faint); }

.rv-btn .icon { flex: none; width: 1em; height: 1em; }

/* ------------------------------------------------------------- state pills */

/* Every financial state is labelled in words as well as colour — colour alone is
   never the only carrier of meaning. */
.rv-state {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  font-size: var(--size-caption);
  font-weight: var(--wght-strong);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.rv-state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.rv-state--settled { color: var(--state-settled); }
.rv-state--pending { color: var(--state-pending); }
.rv-state--failed { color: var(--state-failed); }
.rv-state--unknown { color: var(--state-unknown); }

/* --------------------------------------------------------------- utilities */

.rv-hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }

.rv-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A standing, non-dismissible marker that everything here is simulated. */
.rv-sim-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r4);
  font-size: var(--size-caption);
  font-weight: var(--wght-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}