/* PayBeacon design tokens — "Depth & Signal".
   Identity: a navigational instrument for pay. Deep petrol-teal = authority/depth
   (the sea chart, the instrument panel); signal-amber = the beacon light, used
   sparingly as the one warm spark against cool neutrals. Type: Fraunces (editorial
   display) + IBM Plex Sans/Mono (technical precision).
   NOTE: variable names are kept stable (--pb-coral is the PRIMARY accent slot, now
   teal) so site.css + templates need no churn. --pb-amber is the beacon accent. */

:root {
  /* Cool neutral ground — deliberately NOT warm cream. */
  --pb-cream:      #f2f5f6;   /* page background (cool off-white) */
  --pb-paper:      #ffffff;   /* cards */
  --pb-ink:        #0f1f25;   /* primary text (deep teal-black) */
  --pb-ink-soft:   #3c525c;   /* secondary text (slate-teal) */
  --pb-muted:      #5d737c;   /* tertiary / captions; 4.55:1 minimum on page ground */
  --pb-line:       #dde5e8;   /* hairline borders */
  --pb-line-soft:  #eaf0f1;

  /* PRIMARY accent = deep petrol teal (was coral). CTAs, links, structure. */
  --pb-coral:      #0c5b53;
  --pb-coral-ink:  #094a43;   /* hover/active + accent text */
  --pb-coral-wash: #e3efec;   /* faint teal tint (rows, hovers) */

  /* BEACON accent = signal amber. The one warm spark: the mark, pay highlights. */
  --pb-amber:      #ef9f24;
  --pb-amber-ink:  #965d09;   /* amber as text on light (AA, including amber wash) */
  --pb-amber-wash: #fbeed4;

  --pb-sky:        #3f7d8c;   /* secondary chart stroke (sparingly) */
  --pb-good:       #2f7d5b;
  --pb-warn:       #8a5c0d;

  /* Zero-request system typography: editorial serif + technical UI/mono. */
  --pb-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Cambria, Georgia, serif;
  --pb-sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --pb-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Scale (fluid) */
  --pb-step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --pb-step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --pb-step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --pb-step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --pb-step-3:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --pb-figure:  clamp(2.4rem, 2rem + 3vw, 3.6rem);

  /* Space + form — slightly sharper radii for a precise, instrument feel. */
  --pb-radius:    12px;
  --pb-radius-sm: 8px;
  --pb-gap:       clamp(1rem, 0.6rem + 2vw, 2rem);
  --pb-gutter:    clamp(1.25rem, 5vw, 2rem);
  --pb-maxw:      1080px;
  --pb-shadow:    0 1px 2px rgba(12,40,44,.05), 0 10px 30px rgba(12,40,44,.07);
  --pb-shadow-sm: 0 1px 2px rgba(12,40,44,.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --pb-cream: #0b1418; --pb-paper: #12232a; --pb-ink: #eef4f4; --pb-ink-soft: #b4c5cb;
    --pb-muted: #7e949c; --pb-line: #24373e; --pb-line-soft: #1a2a30;
    --pb-coral: #2ea695; --pb-coral-ink: #49bcab; --pb-coral-wash: #12312d;
    --pb-amber: #f2b043; --pb-amber-ink: #f2b043; --pb-amber-wash: #33261190;
    --pb-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.38);
    --pb-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--pb-cream); color: var(--pb-ink);
  font-family: var(--pb-sans); font-size: var(--pb-step-0); line-height: 1.6;
  min-width: 320px; overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--pb-serif); font-weight: 560; line-height: 1.12; letter-spacing: -0.015em; color: var(--pb-ink); }
h1 { font-size: var(--pb-step-3); margin: 0 0 .4em; font-weight: 600; }
h2 { font-size: var(--pb-step-2); margin: 2em 0 .5em; }
h3 { font-size: var(--pb-step-1); margin: 1.5em 0 .4em; }
a { color: var(--pb-coral-ink); text-underline-offset: 2px; }
a:hover { color: var(--pb-coral); }
.pb-mono { font-family: var(--pb-mono); font-variant-numeric: tabular-nums; }
.pb-wrap {
  width: 100%; max-width: calc(var(--pb-maxw) + var(--pb-gutter) + var(--pb-gutter));
  margin-inline: auto; padding-inline: var(--pb-gutter);
}
.pb-card { background: var(--pb-paper); border: 1px solid var(--pb-line); border-radius: var(--pb-radius); box-shadow: var(--pb-shadow-sm); }
.pb-cta {
  display: inline-flex; align-items: center; gap: .5em; background: var(--pb-coral); color: #fff;
  font-family: var(--pb-sans); font-weight: 600; font-size: var(--pb-step-0);
  min-height: 44px; padding: .7em 1.3em; border: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 0 rgba(9,74,67,.4), 0 6px 18px rgba(12,91,83,.22);
}
.pb-cta:hover { background: var(--pb-coral-ink); color: #fff; transform: translateY(-1px); }
.pb-figure { font-family: var(--pb-mono); font-size: var(--pb-figure); font-weight: 600; letter-spacing: -0.02em; color: var(--pb-ink); font-variant-numeric: tabular-nums; }
.pb-label { font-size: var(--pb-step--1); color: var(--pb-muted); text-transform: uppercase; letter-spacing: .08em; }
img, video { max-width: 100%; height: auto; }