/* Design tokens. Every value comes from docs/DesignSystem.dc.html (v0.2). Add nothing that is not there. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-500.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* Surfaces */
  --deep: #010102;      /* alternate sections */
  --bg: #08090A;        /* page */
  --l1: #0F1011;        /* cards, windows */
  --l2: #141516;        /* rows in app UI */
  --l3: #191A1B;        /* raised, toasts */
  --l4: #28282C;        /* off toggles, disabled */

  /* Text */
  --text-1: #F7F8F8;    /* headlines, key text */
  --text-2: #D0D6E0;    /* body in UI */
  --text-3: #8A8F98;    /* leads, captions */
  --text-4: #62666D;    /* disabled, decorative only (3.5:1, never for reading) */

  /* Accent and status */
  --amber: #FFB547;
  --amber-hover: #FFC46B;
  --amber-on-light: #E09A2B;
  --ink: #08090A;       /* text on amber */
  --on-light-text: #4A4D53;
  --ok: #27A644;
  --ok-text: #4CC264;
  --fail: #EB5757;
  --fail-text: #F07A7A;
  --wait: #FC7840;

  /* Tints used by chips, buttons and fields */
  --amber-ring: rgba(255, 181, 71, 0.2);
  --amber-line: rgba(255, 181, 71, 0.35);
  --amber-fill: rgba(255, 181, 71, 0.08);
  --ok-line: rgba(39, 166, 68, 0.35);
  --ok-fill: rgba(39, 166, 68, 0.1);
  --fail-line: rgba(235, 87, 87, 0.4);
  --fail-fill: rgba(235, 87, 87, 0.1);
  --wait-line: rgba(252, 120, 64, 0.4);
  --wait-fill: rgba(252, 120, 64, 0.08);
  --neutral-fill: rgba(255, 255, 255, 0.03);
  --btn-s-fill: rgba(255, 255, 255, 0.05);
  --btn-s-fill-hover: rgba(255, 255, 255, 0.09);
  --header-bg: rgba(8, 9, 10, 0.8);   /* #08090A at 80% */

  /* Hairlines */
  --line-card: rgba(255, 255, 255, 0.08);
  --line-row: rgba(255, 255, 255, 0.06);
  --line-table: rgba(255, 255, 255, 0.05);
  --line-field: rgba(255, 255, 255, 0.1);
  --line-soon: rgba(255, 255, 255, 0.12);
  --line-hover: rgba(255, 255, 255, 0.14);

  /* Type */
  --font-sans: 'Inter', 'SF Pro Display', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --grad: linear-gradient(180deg, #F7F8F8 25%, rgba(247, 248, 248, 0.55) 100%);

  --fs-display: 72px;  --lh-display: 1.02; --tr-display: -0.032em;
  --fs-h1: 64px;       --lh-h1: 1.02;      --tr-h1: -0.03em;
  --fs-h2: 48px;       --lh-h2: 1.06;      --tr-h2: -0.026em;
  --fs-h3: 20px;       --lh-h3: 1.3;       --tr-h3: -0.015em;
  --fs-card: 17px;     --lh-card: 1.4;
  --fs-lead: 17px;     --lh-lead: 1.6;
  --fs-body: 15px;     --lh-body: 1.55;
  --fs-ui: 13px;       --lh-ui: 1.4;
  --fs-mono: 12px;     --lh-mono: 1.4;
  --fs-label: 12px;
  --w-regular: 400;
  --w-medium: 510;     /* headlines, UI, buttons */
  --w-semibold: 590;   /* H3, card titles, wordmark */

  /* Space: 4px grid */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-112: 112px;

  /* Layout */
  --container: 1184px;
  --gutter: 24px;
  --gutter-phone: 16px;
  --section-gap: 112px;

  /* Radius */
  --r-row: 6px;        /* app rows */
  --r-field: 10px;     /* fields */
  --r-window: 14px;    /* windows, tables */
  --r-card: 16px;      /* cards */
  --r-pill: 9999px;    /* buttons, chips */

  /* Motion: everything except the fan-out is a 150ms colour fade */
  --dur: 150ms;
  --ease: ease-out;
  --fanout-loop: 4.2s;
  --fanout-step: 120ms;

  /* Controls */
  --btn-h: 44px;
  --btn-h-sm: 32px;
  --field-h: 44px;
  --chip-h: 22px;

  /* Glow: soft light, derived from amber and text-2 only */
  --glow-amber: rgba(255, 181, 71, 0.13);     /* hero / CTA pool */
  --glow-amber-faint: rgba(255, 181, 71, 0.05);
  --glow-cool: rgba(208, 214, 224, 0.06);     /* the one cool tint (text-2) */
  --glow-hl: 0 0 36px rgba(255, 181, 71, 0.22);
  --ring-amber: 0 0 0 4px var(--amber-ring), 0 0 28px rgba(255, 181, 71, 0.32);
  --card-glow-line: rgba(255, 181, 71, 0.3);
  --card-glow: 0 0 0 1px rgba(255, 181, 71, 0.05), 0 12px 48px -16px rgba(255, 181, 71, 0.2);
  --sheen: linear-gradient(105deg, transparent 42%, rgba(247, 248, 248, 0.07) 50%, transparent 58%);
  --sheen-dur: 1.8s;
}