/* ============================================================================
   RAMP DESIGN SYSTEM — BASE
   Reset + element defaults. Depends on tokens.css.
   ============================================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  background: var(--rmp-bg);
  color: var(--rmp-ink);
  font-family: var(--rmp-font-sans);
  font-size: var(--rmp-size-body);
  font-weight: var(--rmp-weight-regular);
  line-height: var(--rmp-leading-normal);
  letter-spacing: var(--rmp-tracking-tight);
  -webkit-font-feature-settings: "kern", "liga", "cv11";
  font-feature-settings: "kern", "liga", "cv11";
  transition: background var(--rmp-dur-base) var(--rmp-ease),
              color var(--rmp-dur-base) var(--rmp-ease);
}

/* ── Headings — tight tracking, medium weight, Swiss neutrality ─────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rmp-font-sans);
  font-weight: var(--rmp-weight-medium);
  color: var(--rmp-ink);
  line-height: var(--rmp-leading-snug);
  letter-spacing: var(--rmp-tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--rmp-size-h1); line-height: var(--rmp-leading-tight);
     letter-spacing: var(--rmp-tracking-display); }
h2 { font-size: var(--rmp-size-h2); letter-spacing: var(--rmp-tracking-display); }
h3 { font-size: var(--rmp-size-h3); }
h4 { font-size: var(--rmp-size-h4); }
h5 { font-size: var(--rmp-size-lg); }
h6 { font-size: var(--rmp-size-sm); text-transform: uppercase;
     letter-spacing: var(--rmp-tracking-caps); color: var(--rmp-ink-secondary); }

p { line-height: var(--rmp-leading-relaxed); }

a {
  color: var(--rmp-link);
  text-decoration: none;
  text-underline-offset: 0.15em;
  transition: color var(--rmp-dur-fast) var(--rmp-ease);
}
a:hover { color: var(--rmp-link-hover); text-decoration: underline; }

small { font-size: var(--rmp-size-caption); }

strong, b { font-weight: var(--rmp-weight-medium); }

hr {
  border: none;
  border-top: var(--rmp-border-width) solid var(--rmp-border);
  margin: var(--rmp-space-6) 0;
}

code, kbd, samp, pre {
  font-family: var(--rmp-font-mono);
  font-size: 0.9em;
}
code {
  background: var(--rmp-bg-sunken);
  border: var(--rmp-border-width) solid var(--rmp-border);
  border-radius: var(--rmp-radius-control);
  padding: 0.1em 0.4em;
}
pre {
  background: var(--rmp-bg-inverse);
  color: var(--rmp-ink-inverse);
  border-radius: var(--rmp-radius-surface);
  padding: var(--rmp-space-4);
  overflow-x: auto;
  line-height: var(--rmp-leading-normal);
}
pre code { background: none; border: none; padding: 0; color: inherit; }

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

ul, ol { padding-left: var(--rmp-space-5); }
li { line-height: var(--rmp-leading-relaxed); }

/* Numeric contexts (money, metrics) get tabular lining figures — Ramp is a
   finance product; aligned digits are part of the brand. */
.rmp-tabular, table td, .rmp-metric { font-variant-numeric: tabular-nums; }

/* Focus — chartreuse ring, consistent everywhere. */
:focus-visible {
  outline: none;
  box-shadow: var(--rmp-focus-ring);
  border-radius: var(--rmp-radius-control);
}

::selection {
  background: var(--rmp-accent);
  color: var(--rmp-ink-on-accent);
}

/* ── Type utility classes (mirror the scale) ───────────────────────────── */
.rmp-display { font-size: var(--rmp-size-display); font-weight: var(--rmp-weight-medium);
               line-height: var(--rmp-leading-tight); letter-spacing: var(--rmp-tracking-display); }
.rmp-h1 { font-size: var(--rmp-size-h1); }
.rmp-h2 { font-size: var(--rmp-size-h2); }
.rmp-h3 { font-size: var(--rmp-size-h3); }
.rmp-lead { font-size: var(--rmp-size-lg); color: var(--rmp-ink-secondary);
            line-height: var(--rmp-leading-relaxed); letter-spacing: var(--rmp-tracking-normal); }
.rmp-body { font-size: var(--rmp-size-body); }
.rmp-small { font-size: var(--rmp-size-sm); }
.rmp-caption { font-size: var(--rmp-size-caption); color: var(--rmp-ink-secondary); }
.rmp-eyebrow {
  font-size: var(--rmp-size-caption);
  font-weight: var(--rmp-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--rmp-tracking-caps);
  color: var(--rmp-ink-secondary);
}
.rmp-mono { font-family: var(--rmp-font-mono); }
.rmp-muted { color: var(--rmp-ink-muted); }
.rmp-secondary { color: var(--rmp-ink-secondary); }
.rmp-accent-text { color: var(--rmp-accent); }

/* ── Layout helpers ────────────────────────────────────────────────────── */
.rmp-container { width: 100%; max-width: var(--rmp-container);
                 margin-inline: auto; padding-inline: var(--rmp-space-5); }
.rmp-container-narrow { max-width: var(--rmp-container-narrow); }
.rmp-stack > * + * { margin-top: var(--rmp-space-4); }
.rmp-stack-lg > * + * { margin-top: var(--rmp-space-6); }
.rmp-row { display: flex; gap: var(--rmp-space-3); align-items: center; flex-wrap: wrap; }
.rmp-grid { display: grid; gap: var(--rmp-space-5); }