/* ---------------------------------------------------------------------------
   Design tokens — Rare Cobranças

   Colours and sizes were sampled from refs/LandingPage.jpg (a 1440px-wide
   design rendered at 4x) and from src/svg/logo1.svg / logo2.svg. The brand
   colours below are the logo's own fills, not approximations.

   Change a value here and it propagates through the whole page.
--------------------------------------------------------------------------- */

:root {
  /* Brand ---------------------------------------------------------------- */
  --blue: #0d00a4; /* exact fill of the logo mark; CTAs and primary buttons */
  --blue-hover: #0a0082;
  --ink: #02010a; /* dark sections and footer */
  --bone: #eff0f2; /* light sections */
  --paper: #ffffff; /* FAQ section */

  /* Text ----------------------------------------------------------------- */
  --text-dark: #02010a;
  --text-body-dark: #55555c; /* body copy on light backgrounds */
  --text-body-light: #a8a8b0; /* body copy on dark backgrounds */
  --text-eyebrow: #8a8a93;
  --hairline: #d8d8d8;
  --hairline-dark: rgba(255, 255, 255, 0.12);

  /* Type ----------------------------------------------------------------- */
  --font-serif: 'PT Serif', 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* One display size for serif headings, one for the sans headings on dark
     sections. Both resolve to the reference values at a 1440px viewport. */
  --size-display: clamp(2.25rem, 3.9vw, 3.5rem); /* 56px */
  --size-display-dark: clamp(2rem, 3.82vw, 3.45rem); /* 55px */
  --size-eyebrow: clamp(1.05rem, 1.74vw, 1.55rem); /* 25px */
  --size-body: 16px;

  /* Layout --------------------------------------------------------------- */
  --shell: 1200px;
  --measure: 490px; /* narrow centred text column */
  --measure-faq: 580px;
  --gutter: 24px;
  --section-y: clamp(72px, 9vw, 100px);
  --header-h: 72px;

  /* Distance from the container's content edge to the viewport edge, for
     full-bleed elements that need to escape the container. */
  --bleed-left: calc(max(0px, (100vw - var(--shell)) / 2) + var(--gutter));

  /* Motion --------------------------------------------------------------- */
  --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 900ms;
  --dur-ui: 320ms;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 60px;
    --header-h: 124px;
  }
}