/* ==========================================================================
   Design tokens + global element styles.

   Lifted verbatim from the v2 design's single <style> block
   ("TaskNTrade Site v2.dc.html", Claude Design project 48a0bf6a). Values here
   are the design's own — do not "tidy" a number without changing the design
   first, or the two drift apart.

   Note on naming: --orange / --orange2 originally held the brand BLUE
   (#0B3CFF) — the names are the original design's, carried over deliberately
   so this file diffed cleanly against that source. Rebranded to mint
   (#0CF2A0) on 2026-08-13, then to steel blue (#2563EB light / #3B82F6 dark),
   then to sampled navy/orange (#D36D38/#F0934A), then on 2026-08-17 to the
   comprehensive 4-role palette: Warm Cream (#FDFBF7) / Deep Navy (#020C1B) for
   backgrounds, Soft Blue (#E6F0FA) / Slate Blue (#172A45) for surfaces,
   Navy (#0A192F) / Crisp White (#F8F9FA) for text/brand, Orange (#FF6B35) /
   Neon Orange (#FF8C42) for accents. --navy and --txt are now semantically
   aligned (same value per theme) for consistency. Monochrome logos to match
   (navy in light mode, crisp white in dark). --dim/--dim2 re-derived for the
   new backgrounds. Success/status colors (--ok, --metric-*) unchanged.

   2026-08-17, bright-orange pass. --orange and --orange2 had collapsed to a
   single value across the coral rebrands, which made the two-token system
   dead weight (the header scroll bar's orange→orange2 gradient rendered flat).
   They now carry distinct, deliberate ROLES — do not re-unify them:

     --orange   FILLS AND DECORATION ONLY. Bright: #FF6B35 light / #FF8C42
                dark. Icon tints, chips, dots, borders, bars, progress fills.
                It is 2.69:1 on --ink, which fails even the 3:1 large-text
                floor — so it is NEVER a text colour, at any size. Bright is
                the point of this token; contrast is --orange2's job.
     --orange2  TEXT. #B93E0B light / #FF8C42 dark. Links, a:hover,
                .btn-ghost, eyebrow labels, badge labels, icon strokes.
                Anything a reader has to actually read.

   --orange2 is #B93E0B rather than a lighter #C2410C because orange text most
   often lands on a 14%-orange TINT (the badge pills, the icon chips), not on
   bare --ink. That tint is darker than the page, and #C2410C measured 4.27:1
   on it — passing against the page while quietly failing where the pattern
   actually ships. #B93E0B clears 4.5:1 on all three surfaces: --ink (5.31),
   --panel (5.08), and the tint (4.61). Check any replacement against the tint,
   not just the background.

   Picking --orange for text is the one way to reintroduce the contrast bug
   this split exists to prevent. --on-accent moved to dark ink in css/site.css
   for the same reason: white no longer survives on these fills.

   --edge went .06 -> .12 alpha (cards had no perceptible boundary at 6%) and
   --dim2 #858F9A -> #69737F (placeholder text was 3.12:1, now 4.58:1).
   ========================================================================== */

:root{
  --ink:#F9F9F9; --panel:#F4F4F4; --panel2:#EFEFEF;
  --edge:rgba(100,100,110,.12); --edge2:rgba(100,100,110,.18);
  --txt:#1A2B3D; --dim:#6B7A8A; --dim2:#69737F;
  --orange:#FF6B35; --orange2:#B93E0B; --navy:#003D5C;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --color-bg:var(--ink); --color-text:var(--txt); --color-accent:var(--orange);
  --font-heading:var(--display); --font-body:var(--body);
  color-scheme:light;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#0F1419; --panel:#1A1F27; --panel2:#141A21;
  --edge:rgba(245,247,250,.08); --edge2:rgba(245,247,250,.16);
  --txt:#F5F7FA; --dim:#B8C5D6; --dim2:#A3B0C5;
  --orange:#FF8C42; --orange2:#FF8C42; --navy:#F5F7FA;
}
html[data-theme="dark"] .ribbon{background:rgba(18,20,28,.6) !important}
*{box-sizing:border-box}
a,button,img,[data-tile] div,[data-trow]{transition:all .5s cubic-bezier(.16,1,.3,1)}
body{margin:0;background:var(--ink);color:var(--txt);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,figure,ol,ul{margin:0}
a{color:var(--txt);text-decoration:none}
a:hover{color:var(--orange2)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--orange2);outline-offset:3px}
::selection{background:color-mix(in oklab, var(--orange) 30%, transparent)}
input,textarea,select{font-family:inherit}
/* Native <select> popups are drawn by the browser, not the page. Without
   color-scheme above they stayed light in dark mode while the option text
   inherited the dark theme's near-white --txt: white on white. color-scheme
   fixes macOS/iOS popups; the explicit option colours fix Chrome on
   Windows/Android and Firefox, which paint options from CSS. */
option{background:var(--panel);color:var(--txt)}
input::placeholder,textarea::placeholder{color:var(--dim2)}
::-webkit-scrollbar{height:8px;width:8px}
[data-rail]::-webkit-scrollbar{display:none;height:0}
::-webkit-scrollbar-thumb{background:var(--edge2);border-radius:99px}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ribbon{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.ribbon{animation:ribbon 34s linear infinite}
.ribbon:hover{animation-play-state:paused}
@supports (animation-timeline: view()){
  [data-rise]{animation:rise .01s linear both;animation-timeline:view();animation-range:entry 0% cover 20%}
  [data-bar]{transform-origin:left center;animation:bar .01s linear both;animation-timeline:view();animation-range:entry 12% cover 30%}
}
@media (prefers-reduced-motion:reduce){
  [data-rise],[data-bar]{animation:none!important;opacity:1!important;transform:none!important}
  .ribbon{animation:none}
}