/* DTR design tokens — THE canonical source for every color, track color, and
   vertical rhythm value on the site.

   WHY THIS FILE EXISTS: these tokens used to be hand-copied into two places --
   index.html's inline <style> and dtr-form-theme.css -- with a comment in the
   latter promising it "mirrors index.html's tokens exactly". It did, but only
   because nobody had edited one without the other yet. Any themed change (and
   the planetary/starfield work is exactly that) would have had to be made twice
   and stay in sync by hand. Now it is made once, here.

   LOADING: every page that uses var(--...) must link this file BEFORE its own
   styles. index.html links it ahead of its inline <style>; the five form pages
   link it ahead of dtr-form-theme.css. Adding a new page? Link this first, or
   the page renders with every custom property unset.

   CSP NOTE: same-origin only. style-src is 'self' 'unsafe-inline' -- do not
   move these tokens to a CDN or an external font/style host. */
:root{
  /* Canvas + brand accents. Deliberate single-theme (dark): the aurora glow and
     glass panels only read as premium on a dark canvas. */
  --bg:#08080d;
  --violet:#9b7bf0;
  --cyan:#4fd8d8;
  --gold:#d4b06a;

  /* Glass system */
  --glass:rgba(255,255,255,.045);
  --glass-strong:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);

  /* Type. Contrast measured against --bg (#08080d), not eyeballed:
       --text      17.84:1
       --text-dim  10.36:1  (was #a9a4bb, 8.29 -- raised for legibility, not compliance)
       --text-faint 5.71:1  (was #6f6b82, 3.90 -- FAILED WCAG AA, which needs 4.5 for
                             normal text, and it was carrying 12.5px small print:
                             the contact note, tier sub-labels, the whole footer)
     Three tiers still read as three tiers; the bottom one is now legible. */
  --text:#f3f1f8;
  --text-dim:#bdb8cc;
  --text-faint:#8a86a0;

  /* Status */
  --good:#6fe0b8;
  --warn:#f0b96a;

  /* Opaque twin of the contact/intake field background. The real field is
     rgba(0,0,0,.22) over glass, which is fine normally but useless for painting
     over an autofilled field -- see the :-webkit-autofill blocks. Same value the
     admin panel uses for --panel2, on purpose. */
  --field-solid:#0f0f16;

  /* THE FOUR TRACKS. One color per intake track, used by the homepage cards, the
     /start picker, and each form's accent. These were previously hardcoded as raw
     hex in inline style="--track-color:#..." attributes in both index.html and
     forms/start.html -- eight copies of four values. Change a track's color here
     and it changes everywhere it is referenced by token.

     Order below is the customer-maturity order the homepage presents them in:
     running business -> has an idea -> needs sharpening -> no idea yet. */
  --track-assessment:#0e7490;
  --track-builder:#7c3aed;
  --track-enhance:#db2777;
  --track-brainstorm:#b45309;

  /* VERTICAL RHYTHM. Was a flat `section{padding:100px 0}`, which put 200px
     between every pair of adjacent sections -- roughly 1,400px of empty space
     down the homepage. Worse on phones, where the 860px breakpoint only ever
     overrode padding-left/right (longhand), so the full 100px desktop value
     survived on a quarter of the screen height.

     Sections now use var(--section-y) so the mobile value is a single override
     below instead of something each rule has to remember. */
  --section-y:64px;
}

@media (max-width:860px){
  :root{ --section-y:40px; }
}