/* ==========================================================================
   RELL design tokens
   A light, quiet system: white canvas, thin display type, one accent.
   The three verification colors stay semantic, never decorative:
     green  = verified onchain
     purple = verified from issuer
     amber  = reported or inferred
   ========================================================================== */

:root {
  color-scheme: light;

  /* Canvas and neutrals */
  --white: #ffffff;
  --black: #16181a;
  --ink-700: #23272a;
  --ink-600: #474e55;
  --ink-500: #6a757f;
  --ink-400: #8d9ca9;
  --ink-300: #bcc0c3;
  --ink-200: #d3dbe2;
  --ink-100: #f0f2f4;
  --ink-050: #f7f9fa;

  --text-1: var(--black);
  --text-2: var(--ink-500);
  --text-3: var(--ink-400);

  /* Accent */
  --accent: #b87cff;
  --accent-strong: #7c5cff;
  --accent-soft: #b87cff;
  --accent-wash: #f3efff;

  /* Verification states */
  --onchain: #12a06a;
  --onchain-wash: #e7f6ef;
  --issuer: #7c5cff;
  --issuer-wash: #f0ecff;
  --reported: #b4780a;
  --reported-wash: #fbf1de;

  /* Type */
  --font-display: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --h1: clamp(2.25rem, 1.35rem + 4vw, 4.5rem);
  --h2: clamp(1.75rem, 1.4rem + 1.1vw, 2rem);
  --h3: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --body: 1rem;
  --body-lg: 1.125rem;
  --small: 0.875rem;
  --tiny: 0.75rem;

  --track-h1: -0.028em;
  --track-h2: -0.0125em;
  --track-display: -0.028em;
  --track-label: 0.08em;
  --leading-display: 1.1;
  --leading-body: 1.42;

  /* Layout */
  --container: 76rem;
  --gutter: 1.25rem;
  --section-y: 5rem;
  --nav-h: 2.75rem;

  /* Radii. The large bottom left corner is the signature shape. */
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-pill: 100px;
  --r-card: 12px 12px 12px 52px;
  --r-card-lg: 20px 20px 20px 60px;

  /* Elevation */
  --shadow-nav: 0 1px 2px rgba(22, 24, 26, 0.04), 0 8px 24px rgba(22, 24, 26, 0.08);
  --shadow-card: 0 1px 2px rgba(22, 24, 26, 0.04), 0 12px 32px -12px rgba(22, 24, 26, 0.12);
  --shadow-lift: 0 2px 4px rgba(22, 24, 26, 0.06), 0 20px 44px -16px rgba(22, 24, 26, 0.18);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --fast: 180ms;
  --slow: 400ms;
}

@media (min-width: 640px) {
  :root {
    --gutter: 2rem;
    --section-y: 6rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-y: 6.25rem;
  }
}