/* Worpra design tokens - the only place raw values may live */

/* Self-hosted variable fonts, latin subset. font-display: swap plus the
   size-adjusted local fallbacks below keep layout shift at zero. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src: local("Arial Bold"), local("Arial");
  size-adjust: 102%;
  ascent-override: 93%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

:root {
  --ink: #1B2430;
  --ink-soft: #44505F;
  --paper: #FAF8F4;
  --amber: #F2A93B;
  --amber-deep: #D98E1F;
  --data-green: #2F8F5B;
  --line: #E5E0D8;
  --white: #FFFFFF;

  --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.85rem;
  --step-0: 1.0625rem;
  --step-1: 1.33rem;
  --step-2: 1.66rem;
  --step-3: 2.07rem;
  --step-4: clamp(2rem, 5vw, 3.05rem);

  --space-0: 0;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  --content-max: 72rem;
  --measure: 42rem;
  --measure-wide: 54rem;
  --cluster-gap: var(--space-2);
  --grid-min: 16rem;
  --grid-min-large: 20rem;

  --radius: 6px;
  --rule-width: 1px;
  --rule-heavy-width: 3px;
  --rule: var(--rule-width) solid var(--line);
  --focus-width: 3px;
  --shadow: 0 1px 2px rgb(27 36 48 / 0.08);

  --line-body: 1.65;
  --line-tight: 1.1;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --header-mark: 2.25rem;
  --button-min: 2.75rem;
  --touch-target: 2.75rem;
}

.ledger {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ledger-total {
  color: var(--data-green);
  border-top: var(--rule);
  border-bottom: var(--rule-heavy-width) double var(--line);
}