/* Brivo design tokens.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── white page, near-white cells, charcoal bands; the gradient field is the only colour */
  --bg: #FFFFFF;
  --surface: #FAFAFA;        /* open accordion row, inner mock panels on white */
  --surface-2: #F3F3F2;      /* chip fill, icon box */
  --deep: #262626;           /* charcoal band (security, infrastructure, footer) */
  --deep-2: #1C1C1C;         /* dark mock card on the gradient */
  --deep-3: #2E2E2E;         /* inner panel inside a dark card */
  --deep-rgb: 38, 38, 38;

  /* ── Text ── */
  --text: #141414;           /* ink: headlines, buttons, strong text */
  --text-2: #5E5E5E;         /* leads and body on white (6.4:1) */
  --muted: #767676;          /* captions, sub-labels (4.5:1) */
  --on-dark: #FFFFFF;
  --on-dark-2: #A9A9A9;      /* body on charcoal (6.2:1 on --deep) */
  --on-dark-3: rgba(255, 255, 255, .55); /* partner wordmarks */
  --ink-hover: #383838;      /* ink button hover */
  --word-stroke: rgba(255, 255, 255, .12); /* footer outlined wordmark */

  /* ── Lines ── hairlines do all the separation (no shadows on the page) */
  --line: rgba(0, 0, 0, .11);       /* rails, cell borders on white */
  --line-2: #E6E6E4;                /* inner mock dividers on white */
  --line-dark: rgba(255, 255, 255, .07); /* rails + cell borders on charcoal */
  --plus: rgba(0, 0, 0, .09);       /* the + strip on white */
  --plus-dark: rgba(255, 255, 255, .09);

  /* ── Brand / accent ── saffron: lives in the gradient field (bands, mock cells), tags and the floating help button */
  --accent: #F5A400;
  --accent-strong: #E09400;
  --accent-ink: #8A5A00;     /* same hue, deep enough for small text on white (6.0:1) */
  --accent-soft: #FFF3D1;    /* tag fill */
  --accent-rgb: 245, 164, 0;
  --on-accent: #141414;      /* ink on the accent and on the gradient */
  --grad-top: #FFEDB8;       /* field: pale at the top … */
  --grad-bot: #FFBE2E;       /* … saturated at the bottom */
  --field: linear-gradient(180deg, var(--grad-top), var(--grad-bot));

  /* ── Data / status (mock-ups only) ── */
  --success: #22B573;  --success-ink: #137A4B;
  --warning: #F5A400;
  --danger: #E5484D;  --danger-ink: #B8282E;
  --info: #3D6BF5;  --info-ink: #2346B8;  --info-soft: #E8EEFF;
  --coin-eur: #2F5BD8; --coin-usd: #187349; --coin-gbp: #6B3FD1; --coin-jpy: #C2352D; --coin-brl: #13865A;  /* currency coins */
  --tile-b: #3D6BF5; --tile-c: #FF6A3D; --tile-d: #EDEDED;   /* partner tiles on charcoal */

  /* ── Fonts ── one geometric sans for everything */
  --font-display: "Onest", "Helvetica Neue", Arial, sans-serif;
  --font: "Onest", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii ── buttons 8–12, cards 12–16, the app frame 20; cells are square */
  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 9999px;

  /* ── Spacing / layout ── one framed 1280 column; content inset 32 inside the rails */
  --container: 1280px;
  --inset: 32px;
  --gutter: 80px;
  --section: 112px;          /* head top padding (90–130 band) */
  --head-gap: 64px;          /* lead → cells */
  --cell-pad: 32px;
  --strip: 128px;            /* + strip height */

  /* ── Shadows ── none on the page; one soft lift only for a floating mock card */
  --shadow-1: 0 1px 2px rgba(20, 20, 20, .06);
  --shadow-2: 0 24px 48px -20px rgba(20, 20, 20, .35), 0 2px 6px rgba(20, 20, 20, .08);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .6s;
  --glide: rgba(20, 20, 20, .06);
}

/* ── Type scale ── Onest 500 headlines with tight tracking, grey 500 leads */
.t-display { font: 500 72px/1 var(--font-display); letter-spacing: -2.2px; text-wrap: balance; }
.t-h1 { font: 500 60px/1.02 var(--font-display); letter-spacing: -1.8px; text-wrap: balance; }
.t-h2 { font: 500 40px/1.08 var(--font-display); letter-spacing: -1.1px; text-wrap: balance; }
.t-h3 { font: 500 20px/1.4 var(--font-display); letter-spacing: -.5px; }
.t-h4 { font: 500 18px/1.5 var(--font-display); letter-spacing: -.4px; }
.t-lead { font: 500 18px/1.56 var(--font); color: var(--text-2); }
.t-body { font: 400 16px/1.55 var(--font); }
.t-small { font: 400 14px/1.5 var(--font); }
.t-label { font: 600 14px/1.4 var(--font); }
.t-stat { font: 500 36px/1.1 var(--font-display); letter-spacing: -1.6px; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .t-display { font-size: 52px; letter-spacing: -1.6px; }
  .t-h1 { font-size: 46px; letter-spacing: -1.4px; }
  .t-h2 { font-size: 32px; letter-spacing: -.8px; }
  .t-lead { font-size: 17px; }
}
@media (max-width: 480px) {
  .t-display { font-size: 42px; }
  .t-h1 { font-size: 38px; letter-spacing: -1.1px; }
  .t-h2 { font-size: 28px; letter-spacing: -.6px; }
}

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }