/* ============================================================
   Rayven Systems — design tokens.
   Every color and size on the page derives from this file.

   Discipline: signal orange is the primary action color. Process colors
   appear only in the step rail, where they help the workflow read fast.
   ============================================================ */

:root {
  /* ---- palette — job-packet clean, industrial, restrained ---- */
  --ink: #111315;           /* asphalt black: body text, headlines */
  --paper: #F3F4F1;         /* concrete paper: page background */
  --surface: #FFFFFF;       /* clean work order: panels */
  --slate: #2F4A55;         /* steel: rules and secondary type */
  --accent: #C54A18;        /* signal orange: CTA only */
  --accent-deep: #963712;   /* CTA hover only */
  --field: #315846;         /* field green: reserved for future proof */
  --process-blue: #2E6F91;
  --process-green: #3F8C62;
  --process-red: #B5473F;
  --process-orange: #D48625;
  --line: #D7D9D3;          /* hairlines, borders */
  --shadow-soft: 0 1.1rem 2.4rem rgba(17, 19, 21, 0.1);

  /* ---- type ---- */
  --font-display: "Inter Tight", "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --size-body: 1.0625rem;      /* 17px — phone first */
  --size-body-lg: 1.125rem;    /* 18px at >=40em */
  --size-small: 0.875rem;
  --size-label: 0.8125rem;

  --size-h1: 2.75rem;
  --size-h2: 1.9rem;
  --size-step: 1.3125rem;
  --size-step-run: 1.625rem;

  --track-display: 0;
  --leading-body: 1.65;

  /* ---- structure ---- */
  --content-width: 42.5rem;    /* 680px single column */
  --gutter: 1.25rem;
  --space-section: clamp(4.25rem, 12vh, 7.5rem);
  --hairline: 1px solid var(--line);
  --radius: 3px;
}

@media (min-width: 48em) {
  :root {
    --size-h1: 4.5rem;
    --size-h2: 2.5rem;
    --gutter: 2rem;
    --space-section: 6rem;
  }
}