@font-face {
  font-family: 'Onest';
  src: url('/fonts/onest-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('/fonts/onest-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Commit Mono';
  src: url('/fonts/commit-mono-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}

:root {
  /* color */
  --c-bg: #1B1B1B;
  --c-card: #161616;
  --c-fg: #F3F3F3;
  --c-muted: #5D5C5C;
  --c-rose: #D175AC;
  --c-orange: #F2B151;
  --c-green: #90E9A2;
  --c-blue: #82C7F5;
  --c-purple: #A27FED;
  --c-red: #EC9494;

  /* semantic suit colors — match the diagrams on the concept page */
  --c-suit-action:      var(--c-blue);
  --c-suit-observation: var(--c-rose);
  --c-suit-relation:    var(--c-green);

  /* typography */
  --font-sans: 'Onest', system-ui, sans-serif;
  --font-mono: 'Commit Mono', ui-monospace, monospace;

  --t-display:    56px;
  --t-display-lh: 0.96;
  --t-display-tracking: -0.025em;

  --t-h1:    32px;
  --t-h1-lh: 1.10;
  --t-h1-tracking: -0.015em;

  --t-h2:    22px;
  --t-h2-lh: 1.20;
  --t-h2-tracking: -0.010em;

  --t-h3:    16px;
  --t-h3-lh: 1.30;

  --t-body-lg:    17px;
  --t-body-lg-lh: 1.55;

  --t-body:    14px;
  --t-body-lh: 1.55;

  --t-caption:    12px;
  --t-caption-lh: 1.50;

  --t-micro:    11px;
  --t-micro-lh: 1.40;
  --t-micro-tracking: 0.04em;

  /* radius */
  --radius-base: 1px;
  --radius-pill: 9999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
}