/*
 * Design tokens for turboseo.ai
 *
 * Two colours plus greys. The vermilion is a scalpel, not a paint roller.
 * Every value here is fixed by the brief; see REQ1 to REQ4 in the playbook.
 */

:root {

  /* Colour ------------------------------------------------------------- */

  --ink:             #111111;  /* logo black, headings, primary text */
  --ink-70:          #3D3D3D;  /* body text */
  --ink-45:          #6E6E6E;  /* captions, meta, labels */
  --vermilion:       #E8412A;  /* the ai accent: signature stop, CTA, large type */
  --vermilion-press: #C4321E;  /* pressed states AND inline prose links */
  --paper:           #FFFFFF;
  --paper-alt:       #F5F3F1;  /* alternating surface, warm enough to sit under vermilion */
  --rule:            #E0DDDA;  /* hairlines and borders */

  /*
   * Contrast, computed with the WCAG relative luminance formula, not estimated.
   * Full matrix in reports/turboseo/evidence/contrast-measurements.json.
   *
   *                    on --paper   on --paper-alt
   *   --ink              18.88          17.06       any size
   *   --ink-70           10.86           9.81       any size
   *   --ink-45            5.10           4.61       body, and 4.61 is close to the 4.5 floor
   *   --vermilion         4.02           3.63       LARGE TEXT AND UI ONLY, never running text
   *   --vermilion-press   5.49           4.96       body, so it sets inline prose links
   */

  /* Type --------------------------------------------------------------- */

  --font-display: "Anton", "Arial Narrow", "Haettenschweiler", sans-serif;
  --font-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* 1.333 scale. Display steps are fluid; body steps are fixed for measure stability. */
  /*
   * 7.5rem (120px) was the original ceiling and it was wrong. Measured at 1440:
   * a 16-word headline set 120px inside a 15ch measure rendered SEVEN lines,
   * 823px tall, clipped mid-word at the fold, pushing the refusal statement, the
   * entity strip and the CTA entirely off screen. The brief warns against timid
   * heading sizes, but a clipped seven-line wall is not bold, it is broken, and
   * at that scale the typography shouts even when the words do not.
   *
   * The bold move is a SHORT line set large, not a long line set large.
   */
  /*
   * 3.75rem, not 4rem, and the figure is measured rather than judged. At 64px
   * the service-list line renders 1123px inside a 1104px container, so it
   * wrapped and turned a two-line headline into four. At 60px it renders 1053px
   * and clears with 51px of headroom, which survives the container shrinking
   * before the forced break is released at 60rem.
   */
  --size-hero:  clamp(2.5rem, 4.4vw, 3.75rem);
  --size-d1:    clamp(2.25rem, 7vw, 4.75rem);
  --size-d2:    clamp(1.75rem, 4.6vw, 3.25rem);
  --size-d3:    clamp(1.5rem, 3.2vw, 2.25rem);   /* floor is 24px: Anton closes up below that */
  --size-body:  1.0625rem;                        /* 17px */
  --size-small: 0.9375rem;
  --size-meta:  0.8125rem;

  --leading-display: 0.98;   /* inside the brief's 0.95 to 1.02 band */
  --leading-body:    1.6;
  --tracking-display: -0.01em;
  --tracking-label:    0.08em;

  /* Space: 8px base ---------------------------------------------------- */

  --s1:  0.5rem;
  --s2:  1rem;
  --s3:  1.5rem;
  --s4:  2rem;
  --s5:  3rem;
  --s6:  4rem;
  --s7:  6rem;
  --s8:  8rem;

  /* Layout ------------------------------------------------------------- */

  --content-max: 1200px;
  --measure-max: 720px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* Radius applies to buttons and inputs only, never sections or cards. */
  --radius: 4px;

  --hairline: 1px solid var(--rule);
}