/* ==========================================================================
   TrueForm Design System — "Obsidian Instrument"
   Generated from the design system's tokens.json (v1).
   Do not invent values here. Every colour, size and duration below is a
   token from the DS. Marketing web is Dark by default.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Sora";
  src: url("fonts/Sora-Variable.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("fonts/ArchivoNarrow-Variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* --- Colour: Dark theme (default) ---------------------------------------- */
:root,
[data-theme="dark"] {
  --bg: #07080a;
  --surface: #111316;
  --surface-2: #1a1d21;
  --surface-inverse: #f2f3f5;

  --line: #ffffff1a;
  --line-strong: #ffffff33;
  --line-control: #737882;

  --ink: #f2f3f5;
  --ink-2: #a6abb3;
  --ink-3: #80868f;
  --ink-inverse: #0b0c0e;

  --accent: #d4ff3a;
  --accent-pressed: #b9e81c;
  --on-accent: #0a0b0c;
  --accent-text: #d4ff3a;
  --accent-soft: #d4ff3a1f;

  --primary: #d4ff3a;
  --primary-pressed: #b9e81c;
  --on-primary: #0a0b0c;
  --focus: #d4ff3a;

  --good: #2ee6a0;
  --warn: #ffb224;
  --bad: #ff5a4f;
  --good-soft: #2ee6a01f;
  --warn-soft: #ffb2241f;
  --bad-soft: #ff5a4f1f;

  --muscle: #ae92ff;
  --muscle-soft: #ae92ff24;
  --steady: #86beff;

  --chart-1: #d4ff3a;
  --chart-2: #a6abb3;

  --shadow-card: 0 0 0 0 #00000000;
  --shadow-sheet: 0 -12px 40px #00000099;
  --shadow-accent: 0 8px 28px #d4ff3a33;
}

/* --- Colour: Light theme -------------------------------------------------- */
[data-theme="light"] {
  --bg: #f2f2ee;
  --surface: #ffffff;
  --surface-2: #f7f7f4;
  --surface-inverse: #0b0c0e;

  --line: #0b0c0e1a;
  --line-strong: #0b0c0e2e;
  --line-control: #80848b;

  --ink: #0b0c0e;
  --ink-2: #50545b;
  --ink-3: #63676e;
  --ink-inverse: #f2f3f5;

  --accent: #d4ff3a;
  --accent-pressed: #c3ef22;
  --on-accent: #0a0b0c;
  --accent-text: #4b5f00;
  --accent-soft: #d4ff3a4d;

  --primary: #0b0c0e;
  --primary-pressed: #2a2d31;
  --on-primary: #d4ff3a;
  --focus: #4b5f00;

  --good: #05744c;
  --warn: #8f5700;
  --bad: #c0261c;
  --good-soft: #067a501a;
  --warn-soft: #8f57001a;
  --bad-soft: #c0261c1a;

  --muscle: #5b35d0;
  --muscle-soft: #5b35d01a;
  --steady: #1f62c4;

  --chart-1: #4b5f00;
  --chart-2: #80848b;

  --shadow-card: 0 1px 2px #0b0c0e0f, 0 6px 20px #0b0c0e0d;
  --shadow-sheet: 0 -8px 32px #0b0c0e24;
  --shadow-accent: 0 6px 20px #0b0c0e2e;
}

/* --- HUD colour (identical in both themes: the live screen is always dark) */
:root {
  --hud-glass: #0a0c0fcc;
  --hud-glass-strong: #0a0c0feb;
  --hud-line: #ffffff24;
  --hud-scrim: #000000a6;
  --hud-ink: #ffffff;
  --hud-ink-2: #c4c9d0;
  --hud-accent: #d4ff3a;
  --hud-good: #2ee6a0;
  --hud-warn: #ffb224;
  --hud-bad: #ff5a4f;
  --hud-muscle: #ae92ff;
  --hud-steady: #86beff;
  --hud-bone: #ffffffb3;
  --hud-on-signal: #0a0b0c;

  /* --- Type families --- */
  --font-display: "Sora", "SF Pro Display", system-ui, sans-serif;
  --font-numeric: "Archivo Narrow", "SF Pro Display", system-ui, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
    "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* --- Space (4px grid) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --hud-inset: 16px;

  /* --- Radius --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* --- Size --- */
  --target-min: 44px;
  --target-hud: 64px;
  --control-height: 52px;
  --frame-phone: 8px;

  /* --- Duration --- */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-verdict: 250ms;
  --dur-pop: 320ms;
  --dur-toast: 420ms;
  --dur-controls-idle: 10s;

  /* --- Easing --- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Web layout --- */
  --measure: 1200px;
}

/* ==========================================================================
   Type styles — Web (marketing) group
   ========================================================================== */
.web-display {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 104px);
  line-height: 0.904;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.web-h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.03em;
}
.web-h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 40px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.web-lead {
  font-family: var(--font-ui);
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.524;
  font-weight: 400;
  color: var(--ink-2);
}
.web-body {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
}

/* Shared smaller styles borrowed from the App group, per the DS */
.app-headline {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}
.app-callout {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
}
.app-footnote {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.app-label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-stat {
  font-family: var(--font-numeric);
  font-size: 32px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* HUD type styles (used by the in-page HUD mockups) */
.hud-rep {
  font-family: var(--font-numeric);
  font-size: 120px;
  line-height: 104px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hud-rep-target {
  font-family: var(--font-numeric);
  font-size: 40px;
  line-height: 40px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hud-cue {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hud-value {
  font-family: var(--font-numeric);
  font-size: 32px;
  line-height: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hud-verdict {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.hud-body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}
.hud-label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}