/* Bonded design tokens, v1, 16 Oct 2026.
   Shared by the site and the app. Light values sit on :root; dark values apply when the OS asks for dark
   (unless the page sets data-theme="light") and whenever the page sets data-theme="dark".

   Rules of use
   - One accent, brass. It fills the launch button, curve progress, the selected option and the focus ring. Nothing else.
   - Up and down colours are market semantics, not brand colours. Never use them for decoration.
   - Every figure that sits in a column uses tabular numbers (.num or font-variant-numeric: tabular-nums).
   - Headlines use Archivo at 125% width; everything else is Archivo at 100%. Addresses, signatures and hashes use the mono. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* Brand constants: the same in both themes. Logo files use exactly these. */
  --bonded-ink: #121311;
  --bonded-paper: #eeeee8;
  --bonded-brass: #c9a13a;

  /* Neutrals (a slight olive bias, so the brass sits naturally on them) */
  --bg: #f5f5f1;            /* page */
  --surface: #ffffff;       /* cards, inputs, menus */
  --surface-2: #eeeee8;     /* sunken: table heads, wells, code */
  --surface-3: #e4e4dc;     /* hover on sunken */
  --line: #deded6;          /* hairlines */
  --line-strong: #c3c3b9;   /* dividers that must be seen */
  --line-input: #8b8c83;    /* form control borders, 3.1:1 on --bg, 3.4:1 on --surface */
  --fg: #121311;            /* text, 17:1 on --bg */
  --fg-2: #56574f;          /* secondary text, 6.7:1 */
  --fg-3: #84857c;          /* placeholders, disabled, 3.4:1: never for information */

  /* Accent */
  --accent: #c9a13a;        /* fills only */
  --accent-hover: #b88f27;
  --accent-text: #7a5c14;   /* brass as text on light surfaces, 5.7:1 */
  --accent-wash: #f2ead2;   /* tinted background: highlighted row, selected option */
  --on-accent: #121311;     /* text on brass, 7.7:1 */

  /* Inverse: the primary button and toasts */
  --inverse: #121311;
  --on-inverse: #f5f5f1;

  /* Market semantics */
  --up: #1d7a48;
  --up-wash: #e2f0e6;
  --down: #bf3a32;
  --down-wash: #f7e4e1;

  /* Focus: a darker brass in light mode, so the ring clears 3:1 on every surface */
  --focus: #7a5c14;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

  /* Elevation: only menus, popovers and dialogs float */
  --shadow-float: 0 1px 2px rgb(18 19 17 / 0.06), 0 8px 24px rgb(18 19 17 / 0.10);

  /* Type */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --stretch-display: 125%;  /* headlines and the wordmark */
  --stretch-text: 100%;

  --text-2xs: 0.6875rem;    /* 11 legal, chart ticks */
  --text-xs: 0.75rem;       /* 12 captions, table heads */
  --text-sm: 0.8125rem;     /* 13 dense tables, helper text */
  --text-md: 0.875rem;      /* 14 app default */
  --text-base: 1rem;        /* 16 site body */
  --text-lg: 1.125rem;      /* 18 lead paragraphs */
  --text-xl: 1.3125rem;     /* 21 card titles */
  --text-2xl: 1.625rem;     /* 26 section titles in the app */
  --text-3xl: 2.0625rem;    /* 33 big numbers */
  --text-4xl: 2.625rem;     /* 42 site section titles */
  --text-5xl: 3.375rem;     /* 54 */
  --text-6xl: 4.25rem;      /* 68 site hero */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 800;

  --leading-display: 1.02;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  --tracking-display: -0.025em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;

  /* Space: 4 px steps */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radius: square-ish, echoing the links in the mark */
  --radius-xs: 4px;         /* chips, tags */
  --radius-sm: 8px;         /* buttons, inputs */
  --radius-md: 12px;        /* cards */
  --radius-lg: 20px;        /* large panels, the hero card */
  --radius-full: 999px;     /* token images, progress bars */

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* Layout */
  --content-max: 72rem;
  --measure: 65ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f100e;
    --surface: #171815;
    --surface-2: #1e1f1b;
    --surface-3: #262722;
    --line: #2a2b27;
    --line-strong: #3d3e38;
    --line-input: #6a6b63;
    --fg: #edede7;
    --fg-2: #a4a59c;
    --fg-3: #74756d;
    --accent: #d2ab48;
    --accent-hover: #ddb85a;
    --accent-text: #ddb955;
    --accent-wash: #2a2414;
    --on-accent: #121311;
    --focus: #d2ab48;
    --inverse: #edede7;
    --on-inverse: #121311;
    --up: #46c07f;
    --up-wash: #13281c;
    --down: #f0645b;
    --down-wash: #2e1613;
    --shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f100e;
  --surface: #171815;
  --surface-2: #1e1f1b;
  --surface-3: #262722;
  --line: #2a2b27;
  --line-strong: #3d3e38;
  --line-input: #6a6b63;
  --fg: #edede7;
  --fg-2: #a4a59c;
  --fg-3: #74756d;
  --accent: #d2ab48;
  --accent-hover: #ddb85a;
  --accent-text: #ddb955;
  --accent-wash: #2a2414;
  --on-accent: #121311;
  --focus: #d2ab48;
  --inverse: #edede7;
  --on-inverse: #121311;
  --up: #46c07f;
  --up-wash: #13281c;
  --down: #f0645b;
  --down-wash: #2e1613;
  --shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

/* Base and a few utilities every surface needs */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-stretch: var(--stretch-text);
}
.num, td.num, th.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-ligatures: none; }
.display {
  font-stretch: var(--stretch-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  text-wrap: balance;
}
:focus-visible { outline: none; box-shadow: var(--focus-ring); }