/* Nobody / NoBody AI + Lexify USA Inc. : starter design tokens.
   Both sites load this file unchanged. Lexify differs by composition, not by tokens (see DESIGN.md).
   Fonts are self-hosted in ./fonts (SIL OFL). Copy this file and ./fonts together. */

@font-face {
  font-family: "Gabarito";
  src: url("fonts/gabarito-variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour: ink, paper, one lamp. Orange is a fill, a line or the lamp. It is never text. */
  --ink: #14161c;          /* text, the bot's body, primary buttons */
  --ink-soft: #3b3f48;     /* body paragraphs (10.5:1 on paper) */
  --muted: #565961;        /* captions, labels (7:1 on paper, 6.3:1 on desk) */
  --paper: #ffffff;        /* page */
  --desk: #f3f2ef;         /* soft band, the surface paper objects sit on */
  --rule: #e3e1dc;         /* hairlines, ghost-sheet edges */
  --lamp: #ff5a1f;         /* the accent. Ink text on it (5.8:1), never white (3.1:1). As a lone graphic it passes on paper/ink, NOT on desk (2.8:1) */
  --lamp-deep: #e8460d;    /* hover / pressed fill (ink text 4.6:1) */
  --lamp-tint: #ffede4;    /* soft highlight behind a needs-you moment */
  --night: #14161c;        /* the one dark band (closing + footer); same value as --ink */
  --on-night: #ffffff;
  --focus-ring: var(--ink);        /* use var(--on-night) inside dark bands */

  /* Type */
  --font-display: "Gabarito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-text: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

  --fs-display: clamp(2.875rem, 1.35rem + 5.7vw, 6rem);   /* hero H1: 46px -> 96px */
  --fs-h2: clamp(2.125rem, 1.4rem + 3vw, 3.75rem);        /* 34px -> 60px */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);      /* 22px -> 28px */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);/* 18px -> 21px */
  --fs-body: 1.0625rem;                                    /* 17px */
  --fs-small: 0.875rem;                                    /* 14px */
  --lh-display: 0.95;
  --lh-h2: 1.02;
  --lh-text: 1.6;
  --tracking-display: -0.04em;
  --tracking-h2: -0.035em;
  --tracking-h3: -0.02em;
  --measure: 62ch;

  /* Space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 75rem;                                     /* 1200px */
  --section: clamp(4.5rem, 10vw, 9rem);

  /* Shape: the bubble corner. Every rounded object has a square bottom-left corner, like the bot's head. */
  --r-lg: 1.75rem 1.75rem 1.75rem 0;   /* paper objects, panels */
  --r-md: 0.875rem 0.875rem 0.875rem 0;/* buttons, inputs, chips */
  --r-sm: 0.375rem 0.375rem 0.375rem 0;/* checkboxes, tags */
  --r-round: 50%;                      /* lamps, dots, avatars only */

  /* Motion: one orchestrated moment per page; everything else answers a press or focus. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* the stamp thunk */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 360ms; --dur-4: 700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}