/* ===========================================================================
   allnightonlinetraffic.com — design tokens
   ---------------------------------------------------------------------------
   A LIGHT page with night as an accent. Luis, 2026-08-31: "All Night doesn't
   mean black." The night strip across the top of every page is the ONLY dark
   surface on the site.

   PALETTE COHESION, reviewed 2026-09-01. Four changes, each with a reason:

   1. The neutral text ramp was cool blue-grey (#14181F / #5A6472 / #8A93A1) on
      a WARM paper ground. Warm ground plus cool text is the mismatch that makes
      a page look slightly dirty without anyone being able to say why. The ramp
      is now warm (#1A1613 / #6A6055 / #857C71) and sits in the same temperature
      family as the paper it prints on.
   2. --dim was #8A93A1, which cleared only about 3:1 on paper and is used for
      eyebrows and captions. It now clears AA. That was an accessibility defect,
      not a taste question.
   3. The link colour was #1A5FBF, a generic system blue and the only hue on the
      site belonging to no family - a fourth, orphan note. It is now #0F6E7D, a
      deep teal that is a cousin of the Virginia accent, still unmistakably a
      link, and warm-compatible.
   4. California gold was #F3C450, so close to the action amber #FFB627 that the
      state accent and the button colour read as the same colour. Gold is now
      deeper (#E8AE2E) so the two are deliberately different notes rather than
      accidentally similar.

   The night strip stays cool (#141B26) on purpose. It is the one cool surface
   on a warm page, and it is called night.

   THE RULE THAT KEEPS THIS READABLE, and it is not a preference:
   amber, gold and teal are FILLS. They carry ink text on top and are never
   used as text themselves — the bright values do not clear WCAG AA at body
   size on paper. Where a brand colour has to be text, an icon or a rule, it
   uses its --*-ink variant below, which does.
   ======================================================================== */

:root {
  /* ---- ground ---------------------------------------------------------- */
  --paper:      #FBFAF7;   /* page ground, warm off-white */
  --band:       #F3F1EC;   /* alternating section bands */
  --surface:    #FFFFFF;   /* cards */
  --line:       #E2DED5;   /* rules and borders */
  --night:      #141B26;   /* the top strip. The only dark surface. */

  /* ---- text ------------------------------------------------------------ */
  --ink:        #1A1613;   /* body text - WARM near-black, not blue-black */
  --muted:      #6A6055;   /* secondary text */
  --dim:        #797064;   /* labels, eyebrows, captions - 4.66 on paper, clears AA */
  --on-night:   #C7CEDA;   /* text on the night strip */

  /* ---- brand fills (never text) ---------------------------------------- */
  --amber:      #FFB627;   /* the action colour */
  --ca:         #E8AE2E;   /* California section */
  --va:         #37B9A0;   /* Virginia section */

  /* ---- the same colours, as text / icons / rules ----------------------- */
  --amber-ink:  #B57600;
  --ca-ink:     #8C6A0A;
  --va-ink:     #0F7A66;
  --link:       #0F6E7D;
  --link-hover: #0A525E;

  /* ---- text that sits ON a fill ---------------------------------------- */
  --on-amber:   #1A1613;
  --on-ca:      #1A1613;
  --on-va:      #06231D;

  /* ---- the darker edge under each fill --------------------------------- */
  /* A control gets a solid offset edge in its own darker tone rather than a
     grey drop shadow. Grey under a saturated fill reads as dirt; the same hue
     darkened reads as a moulded edge. This is the network's button pattern,
     which cheapdrivingclinic sets with box-shadow:0 2px 0 var(--action-dk). */
  --amber-dk:   #C98600;
  --ca-dk:      #B9871A;
  --va-dk:      #218D77;

  /* ---- elevation ------------------------------------------------------- */
  /* Two layers, both very low alpha and warm-tinted rather than neutral black:
     a tight contact shadow that grounds the edge, and a wide ambient one that
     lifts the whole shape. A single hard shadow is what makes a card look
     cheap. */
  --shadow-1: 0 1px 2px rgba(32, 26, 14, .05), 0 2px 8px rgba(32, 26, 14, .04);
  --shadow-2: 0 2px 4px rgba(32, 26, 14, .06), 0 8px 24px rgba(32, 26, 14, .07);
  --shadow-3: 0 4px 8px rgba(32, 26, 14, .07), 0 18px 44px rgba(32, 26, 14, .10);

  /* A hairline lighter than the border, laid along the top edge of a raised
     surface. It is what makes a card read as lit from above. */
  --edge-hi: inset 0 1px 0 rgba(255, 255, 255, .9);

  /* ---- type ------------------------------------------------------------ */
  /* Self-hosted variable faces, preloaded in the head. No third-party font
     host: these are render-blocking and must not depend on someone else's
     CDN being up. Fallbacks have close metrics so a font failure reflows
     as little as possible. */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* The Virginia disclosure panel overrides both. Virginia DMV requires
     "standard fonts (Times New Roman, Arial, or similar)" on the home page,
     so that panel uses a system stack with no webfont dependency at all. */
  --font-legal:   Arial, Helvetica, sans-serif;

  --step--1: 0.875rem;   /* 14px  captions, legal */
  --step-0:  1.0625rem;  /* 17px  body */
  --step-1:  1.1875rem;  /* 19px  lead paragraphs */
  --step-2:  1.3125rem;  /* 21px  h3 */
  --step-3:  1.625rem;   /* 26px  card headings */
  --step-4:  2.5rem;     /* 40px  section headings */
  --step-5:  3.5rem;     /* 56px  page headings */
  --step-6:  4rem;       /* 64px  hub hero */

  /* ---- space ----------------------------------------------------------- */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.75rem;
  --s-8: 6rem;

  --radius:    10px;
  --radius-sm: 6px;

  --wrap: 1180px;
  --gutter: 3rem;

  /* Minimum tap target. Never render an interactive control smaller. */
  --tap: 44px;
}

@media (max-width: 760px) {
  :root {
    --step-4: 1.75rem;
    --step-5: 2.125rem;
    --step-6: 2.125rem;
    --gutter: 1.125rem;
    --s-7: 2.25rem;
    --s-8: 2.5rem;
  }
}