/* Flow Test Lawn Care: tokens. Direction A, Painted Trailer Sign (direction.md).
   Breakpoints (custom properties can't go in media queries):
     wide: min-width 900px  (12-column grid, hero + tailgate side by side, no sticky bar)
     max:  1440px design width */
:root {
  /* Color roles */
  --ground: #2F6B3A;     /* trailer green (estimate) */
  --ink: #FFFFFF;        /* sign lettering, text on ground and deep */
  --deep: #183D22;       /* the green in shade: drop shadows, deep boards, sticky bar, text on cut */
  --cut: #D8E8B0;        /* fresh-cut grass: price, rules, button fill, focus ring */
  --on-cut: #183D22;     /* text on cut */
  --shadow-deep: #0E2414;/* drop shadow for lettering on a deep board (no text in this color) */
  --line: #D8E8B0;       /* painted rules */

  /* Type */
  --font-display: "Alfa Slab One", "Rockwell", "Roboto Slab", Georgia, serif;
  --font-script: "Yellowtail", "Brush Script MT", cursive;
  --font-body: "Libre Franklin", "Franklin Gothic", Arial, sans-serif;

  /* Fluid scale: px at 390 -> px at 1440 */
  --step--1: 15px;                                        /* labels, fine print */
  --step-0: clamp(18px, 17.63px + 0.095vw, 19px);         /* body */
  --step-1: clamp(20px, 18.51px + 0.381vw, 24px);         /* lede, big list */
  --step-2: clamp(24px, 20.29px + 0.952vw, 34px);         /* h3, button word, sign sub-lines */
  --step-3: clamp(30px, 23.31px + 1.714vw, 48px);         /* h2 */
  --step-4: clamp(40px, 28.11px + 3.048vw, 72px);         /* sign board main line */
  --step-5: clamp(44px, 30.63px + 3.429vw, 80px);         /* h1, the price */

  --leading-display: 1.02;
  --leading-body: 1.5;
  --track-display: 0.01em;
  --track-label: 0.14em;
  --weight-body: 400;
  --weight-strong: 600;
  --measure: 60ch;
  --measure-lede: 36ch;

  /* Painted drop shadow: offset, no blur */
  --paint-shadow: 3px 3px 0 var(--deep);
  --paint-shadow-sm: 2px 2px 0 var(--deep);
  --paint-shadow-on-deep: 3px 3px 0 var(--shadow-deep);

  /* Space */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: clamp(28px, 22.43px + 1.429vw, 44px);
  --space-xl: clamp(40px, 31.09px + 2.286vw, 64px);
  --space-2xl: clamp(48px, 33.14px + 3.81vw, 88px);

  /* Shape: squared, painted. No rounding, no soft shadows. */
  --radius: 0;
  --border: 3px;          /* board border, rules, button border */
  --keyline-offset: -9px; /* inset deep keyline inside a board's white border */
  --shadow: none;
  --button-shadow: 4px 4px 0 var(--deep);
  --focus: 3px solid var(--cut);
  --focus-offset: 3px;

  /* Layout */
  --max: 1240px;
  --gutter: clamp(16px, 7.09px + 2.286vw, 40px);
  --tap: 48px;
}