/* Tesseract design system tokens, softened by Arya's word (decision 49), from design/tesseract/tokens.css (taken
   2026-11-05), adjusted as design/README.md says: screen scale only, no --tint-panel (a panel is never semi-yellow), no dark yellow,
   and only the three fonts Forge ships (copied from the app, OFL; licences beside them in fonts/). */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus_jakarta_sans_variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest_variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains_mono_regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-0: #0e0d0b;
  --bg-1: #181714;
  --bg-2: #211f1b;
  --text-hi: #f1eee6;
  --text-mid: #a5a094;
  --text-lo: #79746a;
  --yellow: #ffd633;
  --yellow-300: #ffe680;
  --ink: #141209;
  --overlay-chrome: rgba(10, 10, 9, 0.82);
  --progress-track: rgba(245, 242, 233, 0.15);
  --rule-control: inset 0 0 0 1px rgba(245, 242, 233, 0.14);
  --paper-12: rgba(245, 242, 233, 0.12);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --gutter-app: 20px;
  --measure: 480px;
  --control-h: 44px;
  --tap-min: 44px;
  --tabbar-h: 64px;
  --rail-w: 72px;
  --queue-w: 360px;
  --progress-h: 6px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --lift: 0 10px 34px rgba(0, 0, 0, 0.34);
  --lift-sm: 0 4px 16px rgba(0, 0, 0, 0.26);
  --glow: 0 8px 28px rgba(255, 214, 51, 0.16);

  --dur-fast: 200ms;
  --dur-base: 350ms;
  --dur-shift: 800ms;
  --ease-calm: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-shift: cubic-bezier(0.65, 0, 0.35, 1);
  --scrim-floor: linear-gradient(180deg, rgba(10, 10, 9, 0) 55%, rgba(10, 10, 9, 0.68) 100%);
  --scrim-edge: linear-gradient(90deg, rgba(10, 10, 9, 0.78) 0%, rgba(10, 10, 9, 0) 58%);
  --scrim-top: linear-gradient(180deg, rgba(10, 10, 9, 0.72) 0%, rgba(10, 10, 9, 0) 45%);

  --track-kicker: 0.01em;
  --rule-divider: 1px solid rgba(245, 242, 233, 0.07);
  --rule-hairline: 1px solid rgba(245, 242, 233, 0.09);
  --rule-accent: 2px solid #ffd633;
  --blur-chrome: 8px;
  --lh-title: 1.05;
  --lh-snug: 1.4;
  --lh-body: 1.55;

  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Onest", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --text-ui-h3: 600 30px/1.15 var(--font-display);
  --text-ui-h4: 600 21px/1.2 var(--font-display);
  --text-ui-body-lg: 400 19px/1.55 var(--font-body);
  --text-ui-body: 400 17px/1.55 var(--font-body);
  --text-ui-body-sm: 500 15px/1.3 var(--font-body);
  --text-ui-meta: 500 14px/1.4 var(--font-body);
  --text-ui-micro: 500 12px/1.4 var(--font-body);
  --text-ui-mono: 500 12px/1.4 var(--font-body);
}

.ui-h3 { font: var(--text-ui-h3); }
.ui-h4 { font: var(--text-ui-h4); }
.ui-body-lg { font: var(--text-ui-body-lg); }
.ui-body { font: var(--text-ui-body); }
.ui-body-sm { font: var(--text-ui-body-sm); }
.ui-meta { font: var(--text-ui-meta); }
.ui-micro { font: var(--text-ui-micro); }
.ui-mono { font: var(--text-ui-mono); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }