/* Optimus Distributor — design tokens, extracted verbatim from designs/4-flagship (Phase 2).
   The single home of colour/type/spacing custom properties. Linked FIRST on every page. */
:root{
  --bg:#060D1A; --bg2:#0A1424; --panel:#0C1830; --panel2:#122140;
  --line:rgba(96,168,232,.14); --line2:rgba(96,168,232,.26);
  --line-strong:rgba(96,168,232,.4);
  --cyan:#29AAE3; --cyan2:#4CC4FF; --blue:#1D82C6; --navy:#224B85;
  --ink:#EAF2FB; --mut:#93A9C4;
  /* --mut2 was #5F7690 = 4.15:1 on --bg, under the 4.5:1 AA floor, and it carried the
     UPPERCASE MONO LABELS that name every section -- so footer column heads rendered
     dimmer than the links beneath them and the hierarchy read inverted. #8098B4 = 6.54:1.
     All 24 use sites are labels, breadcrumbs or notes; none is decorative, so there is
     deliberately no quieter tier to fall back to. (2026-08-21 design review, finding A-D3.) */
  --mut2:#8098B4;
  /* --prose sits between --mut and --ink. Long-form body was set entirely in --mut, so
     3,000-word articles read as flat grey-blue with no tonal variation. (A-E3) */
  --prose:#C3D3E6;
  --disp:'Poppins',sans-serif; --body:'Inter',sans-serif; --mono:'IBM Plex Mono',monospace;
  --rad:18px; --rad-s:12px;
  --wrap:1200px; --pad:24px;
  /* Section rhythm has three tiers, not one. Seven consecutive homepage bands at a single
     104px made every section equal-weight, so the ready-stock proof carried the same
     emphasis as a pill cloud. --sec-lg is for the one or two bands that carry the page's
     argument; --sec-sm for connective strips. (A-E1 / B-E2) */
  --sec:104px; --sec-lg:136px; --sec-sm:72px; --band:64px;
  /* A five-step spacing scale. There were 20 distinct gap: values across 11 sheets and no
     token for any of them, which is why gutters disagreed inside a single section. (B-E1) */
  --g1:8px; --g2:14px; --g3:20px; --g4:32px; --g5:56px;
  /* The deep tier. --bg and --bg2 differ by 1.05:1, so "alternating" bands were separated
     only by a hairline and eight screens read as one flat plane. (A-E1) */
  --bg-deep:#03070F;
}

/* ============================ THE BREAKPOINT SCALE ============================
   FOUR widths, and every sheet on the site uses these and nothing else:

     520px   phone                     one column, everywhere
     700px   large phone / small tablet
     900px   tablet / small laptop     the chrome's hinge: search collapses to an icon
     1120px  laptop                    above here, and only above here, the full nav shows
     (1440)  the container ceiling     no query needed -- --wrap caps the measure at 1200

   `min-width` rules use the complement, step + 1 (521 / 701 / 901 / 1121), so no viewport
   width can fall between two rules or satisfy both.

   Before 2026-08-21 there were TWENTY-ONE distinct widths across twelve sheets, every one
   picked locally by whoever was fixing the component in front of them. Three consecutive
   ones -- 820, 840, 860 -- each moved a single component while the rest of the page stood
   still, so dragging a window read as breakage rather than as a layout. (Round 5, B F5-3:
   "without this the ceiling is about 8.6 no matter how many individual defects get closed".)

   A new width is not a local decision. `snap_breakpoints.py` holds the map and refuses any
   width that is not in it; adding one means adding it there, on purpose, with a reason.
   ============================================================================= */

/* The rhythm was authored for 1440 and never re-scaled: --sec-lg plus --sec is 240px
   of empty between two bands on an 844px phone screen. (round 3, B F-7) */
@media (max-width:1120px){
  :root{--sec:76px; --sec-lg:96px; --sec-sm:52px; --band:52px}
}
@media (max-width:700px){
  :root{--sec:64px; --sec-lg:84px; --sec-sm:44px; --band:44px}
}