/* ═══════════════════════════════════════════════════════════════════
   50K design tokens — from the product's own documentation.

   Sources, in order of authority:

     ColorNames — the product's colour documentation: nine colour pairs, each
     with a light value and a dark value and the usage written on it.
     Both swatch files agree at the fill level.

     The Flutter theme — colours are stored as theme pairs and resolved
     per theme by a switch; the type scale is TextStyle constants, Outfit,
     weights w200–w800, sizes 8sp–100sp, line-height 1.0.

     The padding spec — an annotated pop-up: 8pt rhythm with 16/24/32
     steps, button radius 15, sheet radius 23, primary button full
     width at 16px from each screen edge, 8px between stacked buttons.

   One green per theme: #1DDE8D in dark, #269969 in light. They are the
   same pair. Any other green is a mistake, not a token.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── The nine colour pairs, dark values (this page runs dark) ─────── */
  --bg:      #191B1C;  /* DarkGray      · BG                             */
  --card:    #262629;  /* DarkGray1     · BG, bubbles                    */
  --line:    #393942;  /* DarkGray2     · borders, dividers              */
  --scroll:  #5D5D64;  /* DarkGray3     · scroll bar, arrows, disabled   */
  --icon:    #8C9B98;  /* DarkGray4     · menu icons                     */
  --text-2:  #BCD1CC;  /* DarkMidGray   · subtext, small headlines       */
  --text:    #FFFFFF;  /* White         · main text                      */
  --green:   #1DDE8D;  /* DarkPrimary   · call for actions, rise price   */
  --red:     #ED5562;  /* DarkRed       · alerts, cancel, fallers price  */

  /* ── The same pairs, light values ─────────────────────────────────── */
  --l-bg:      #FFFFFF;  /* White      · BG, clickable containers        */
  --l-card:    #F8F8F8;  /* LightGray1 · BG, bubbles                     */
  --l-line:    #E2E9EC;  /* LightGray2 · borders, dividers               */
  --l-scroll:  #ABBAB8;  /* LightGray3 · scroll bar, arrows, disabled    */
  --l-icon:    #879696;  /* LightGray4 · menu icons                      */
  --l-text-2:  #505C59;  /* MidGray    · subtext, small headlines        */
  --l-text:    #191B1C;  /* DarkGray   · main text                       */
  --l-green:   #269969;  /* Primary    · call for actions, rise price    */
  --l-red:     #C74A54;  /* Red        · alerts, cancel, fallers price   */

  /* ── Type — Outfit for app, web, brand and marketing ──────────────── */
  --font: "Outfit", "Outfit fb", system-ui, -apple-system, sans-serif;

  /* the app's seven weights, by their names in code */
  --w-lit: 200; --w-reg: 300; --w-med: 400; --w-semibold: 500;
  --w-bold: 600; --w-extrabold: 700; --w-black: 800;

  /* page reading styles (the app's own scale is documented in §03) */
  --t-display: 700 clamp(38px, 6vw, 64px)/1.06 var(--font);
  --t-h1:      700 clamp(30px, 4.2vw, 44px)/1.1  var(--font);
  --t-h3:      600 20px/1.3   var(--font);
  --t-body:    400 16px/1.65  var(--font);
  --t-sm:      400 14px/1.55  var(--font);
  --t-label:   600 13.5px/1.4 var(--font);
  --t-mono:    500 12.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Space — 8pt rhythm, 4px micro step ───────────────────────────── */
  --s0: 4px;  --s1: 8px;  --s2: 12px; --s3: 16px;
  --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px;

  /* ── Radius — the three that are documented ───────────────────────── */
  --r-btn:   15px;   /* primary button                                   */
  --r-sheet: 23px;   /* pop-ups and sheets                               */
  --r-pill:  999px;  /* chips and segmented controls                     */

  /* ── The primary button contract ──────────────────────────────────── */
  --btn-h: 48px;       /* 358 x 48 in the component file                 */
  --btn-inset: 16px;   /* full width, 16px from each screen edge         */
  --btn-gap: 8px;      /* between stacked buttons                        */

  /* ── Motion (page-level; the product's Lottie layer is §08) ───────── */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-tap: 120ms; --dur-base: 200ms; --dur-sheet: 280ms;
}