/*
 * Design tokens and base element styles, lifted from the mockup Nando approved
 * (02 - Projects/Freedom Rate/Freedom Rate Mockup.html): the :root custom properties, the
 * prefers-color-scheme dark block, the [data-theme] overrides and the type scale.
 *
 * The mockup loads Bricolage Grotesque / Public Sans / IBM Plex Mono from Google Fonts. This page does
 * not: it is public, it promises that nothing leaves the tab, and it has exactly one link. The stacks
 * below are the mockup's own fallbacks, so the page renders with no third-party request.
 */
:root {
  --ground: #E4E9F0; --surface: #FBFCFD; --surface-2: #F0F3F8; --line: #D3DAE4; --line-strong: #B9C2D0;
  --ink: #121A2B; --ink-2: #39445A; --muted: #5C677C;
  --accent: #2A44D6; --accent-ink: #FFFFFF; --accent-soft: #E2E7FF;
  --cost: #B0301B; --cost-soft: #FBE8E4; --kept: #1B7348; --kept-soft: #E0F2E8;
  --flag: #8F5C0C; --flag-soft: #FAEFD9;
  --receipt: #FFFFFF;
  --shadow: 0 30px 70px -30px rgba(18, 26, 43, .45), 0 2px 6px rgba(18, 26, 43, .08);
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Public Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B0F17; --surface: #141A25; --surface-2: #1B2331; --line: #283246; --line-strong: #39455C;
    --ink: #E6EBF4; --ink-2: #C0C8D6; --muted: #939EB2;
    --accent: #8C9DFF; --accent-ink: #0B0F17; --accent-soft: #222B52;
    --cost: #FF8568; --cost-soft: #3A1E19; --kept: #62CC95; --kept-soft: #152E20;
    --flag: #E8B04F; --flag-soft: #33270E;
    --receipt: #1A2130;
    --shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  --ground: #0B0F17; --surface: #141A25; --surface-2: #1B2331; --line: #283246; --line-strong: #39455C;
  --ink: #E6EBF4; --ink-2: #C0C8D6; --muted: #939EB2;
  --accent: #8C9DFF; --accent-ink: #0B0F17; --accent-soft: #222B52;
  --cost: #FF8568; --cost-soft: #3A1E19; --kept: #62CC95; --kept-soft: #152E20;
  --flag: #E8B04F; --flag-soft: #33270E;
  --receipt: #1A2130;
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box }
[hidden] { display: none !important }
html { color-scheme: light dark }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums }