/*
 * Design tokens as CSS custom properties.
 * Colour, spacing, radius and focus-ring: docs/project/design-system/design-tokens.json
 * (light/"Paper" theme values only — dark mode is out of scope for this unit). Do not hand-edit
 * one of those values here without updating it there first.
 *
 * Type: overridden by D47 (base/01.2) to match the Airo site — see prompt-01.2-page.md's measured
 * spec. This deliberately departs from design-tokens.json's type scale, which still governs
 * everything else (colour, spacing, radius). Line-heights here are unitless ratios, as measured,
 * not the px pairs design-tokens.json uses.
 */

:root {
  /* Colour */
  --paper: #f3f5f7;
  --paper-raised: #ffffff;
  --grid: #d5dde7;
  --line-strong: #7c8a9c;
  --ink: #0f1722;
  --ink-muted: #526073;
  --cyanotype: #17508f;
  --cyanotype-deep: #0b2a52;
  --on-deep: #f3f5f7;
  --cyanotype-tint: #dde8f4;
  --on-cyanotype: #ffffff;
  --redline: #c8372a;
  --link: var(--cyanotype);

  /* Spacing (8px grid, 4px half-step) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-0: 0px;
  --radius-sm: 2px;
  --radius-full: 9999px;

  /* Shadow */
  --focus-ring: 0 0 0 2px #f3f5f7, 0 0 0 4px #17508f;

  /* Type: families */
  --font-family-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type: hero <h1> */
  --font-h1-size: 56px;
  --font-h1-size-mobile: 36px;
  --font-h1-line-height: 1.1;
  --font-h1-weight: 800;
  --font-h1-letter-spacing: -0.02em;

  /* Type: big mono display number, step-number only (unchanged by D47) */
  --font-display-size: 56px;
  --font-display-line-height: 60px;

  /* Type: contact heading "Book a call" */
  --font-contact-heading-size: 38.4px;
  --font-contact-heading-size-mobile: 28px;
  --font-contact-heading-line-height: 1.15;
  --font-contact-heading-weight: 800;

  /* Type: problem card titles */
  --font-card-title-size: 16px;
  --font-card-title-line-height: 1.3;
  --font-card-title-weight: 700;

  /* Type: service titles, step titles */
  --font-h3-size: 17px;
  --font-h3-line-height: 1.3;
  --font-h3-weight: 700;

  /* Type: team names */
  --font-team-name-size: 17px;
  --font-team-name-line-height: 1.5;
  --font-team-name-weight: 700;

  /* Type: hero subheadline */
  --font-hero-subheadline-size: 17px;
  --font-hero-subheadline-line-height: 1.7;
  --font-hero-subheadline-weight: 400;

  /* Type: body text default (also: problem card text, service description, step text, team bio) */
  --font-body-size: 14px;
  --font-body-line-height: 1.65;
  --font-body-weight: 400;

  /* Type: service "Format: …" line */
  --font-format-size: 12px;
  --font-format-line-height: 1.5;
  --font-format-weight: 400;
  --font-format-letter-spacing: 0.04em;

  /* Type: service "You get: …" line, and its bold leading span */
  --font-you-get-size: 13px;
  --font-you-get-line-height: 1.6;
  --font-you-get-weight: 400;
  --font-you-get-label-weight: 600;

  /* Type: learn-with-us paragraph */
  --font-learn-text-size: 15px;
  --font-learn-text-line-height: 1.7;
  --font-learn-text-weight: 400;

  /* Type: contact section intro text */
  --font-contact-text-size: 16px;
  --font-contact-text-line-height: 1.6;
  --font-contact-text-weight: 400;

  /* Type: "Or email us at …" line */
  --font-contact-alt-size: 14px;
  --font-contact-alt-line-height: 1.65;
  --font-contact-alt-weight: 400;

  /* Type: section labels (<h2>) only, as of base/01.3 — the "Coming soon" tag has its own
     --font-tag-* tokens below, since it no longer matches the label size. */
  --font-label-size: 14px;
  --font-label-line-height: 1.5;
  --font-label-weight: 500;
  --font-label-letter-spacing: 0.12em;

  /* Type: the "Coming soon" tag. Airo's measured values. */
  --font-tag-size: 11px;
  --font-tag-line-height: 1.5;
  --font-tag-weight: 500;
  --font-tag-letter-spacing: 0.08em;

  /* Type: small mono meta text that moves together — nav links, team role, footer text/links.
     Individual weight/colour still varies per use (team's LinkedIn link is weight 500; nav/footer
     colours differ), so those are set where each is used, not here. */
  --font-meta-size: 13px;
  --font-meta-line-height: 1.5;
  --font-meta-weight: 400;
  --font-meta-letter-spacing: 0.04em;

  /* Type: buttons (header "Book a call", hero buttons, "Send message") */
  --font-button-size: 14px;
  --font-button-line-height: 1.5;
  --font-button-weight: 600;
  --font-button-letter-spacing: 0.04em;

  /* Type: form labels */
  --font-form-label-size: 12px;
  --font-form-label-line-height: 1.5;
  --font-form-label-weight: 400;
  --font-form-label-letter-spacing: 0.08em;

  /* Type: form inputs and textarea. 16px avoids iOS zoom-on-focus. */
  --font-input-size: 16px;
  --font-input-line-height: 1.5;
  --font-input-weight: 400;

  /* Motion: hover, reveal-on-scroll, hero grid (base/01.4, D53) */
  --motion-reveal: 600ms;
  --motion-stagger: 80ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-offset: 24px;
  --hover-lift: -4px;

  /* Motion: asymmetric hover timing (base/01.5, D54) — react in fast, ease back out slower.
     --motion-fast (200ms, undirected) is retired: every former user of it needed one duration on
     the way in and another on the way out, which these two replace. */
  --motion-hover-in: 80ms;
  --motion-hover-out: 200ms;
}