/* ui.css: the one shared look for buttons, fields, cards and popups on every page (home, wizard, create, token, docs, faq).
   Loaded LAST on each page so it wins over the older one-off rules. Visual only: no layout logic, no wording.
   The dark chart editor (#editor-root) keeps its own tool look and is left alone here.
   Three button kinds:
     primary   dark crayon fill, yellow label (the home page Connect wallet colours)
     secondary white fill, crayon outline (the default for every .btn in scope)
     quiet     no fill, crayon label, outline shows on hover (Close, Cancel)
   All three share one font, size, height, padding and radius. */
:root{
  /* ---------- ChART (2026-10-20) ---------- */
  /* 2026-10-21: neon only on charts and candles (the mockup palette). A token's drawing uses one pair from
     --ch-pal-*; the live trading chart and trade rows use up = green, down = magenta. */
  --ch-candle-up:#2df0a5;
  --ch-candle-down:#f355d5;
  --ch-candle-wick:#ffffff;
  /* the one accent besides black and white: an oil slick (thin-film iridescence), used sparingly: primary hover,
     the active chain toggle, progress bars, the hairline on a hovered card */
  --ch-oil:linear-gradient(118deg,#2a0f4f 0%,#16546a 22%,#1e6b45 40%,#8a6a12 57%,#7a1f5c 76%,#2a0f4f 100%);
  --ch-oil-ring:conic-gradient(from 210deg,#2a0f4f,#16546a,#1e6b45,#8a6a12,#7a1f5c,#2a0f4f);
  --ch-oil-solid:#16546a;
  --ch-price-line:#2df0a5;   /* the live price line over card art */
  --ch-bg:#000;
  --ch-ink:#fff;
  --ch-mute:#8c8c8c;
  --ch-faint:#767676;          /* SITE_SPEC A-005: 4.6:1 on black (the mockup's #5c5c5c was 3.1:1) */
  --ch-line:#1a1a1a;
  --ch-line2:#2a2a2a;
  --ch-panel:#080808;
  --ch-field:#0b0b0b;
  --ch-serif:'Instrument Serif','Times New Roman',serif;
  --ch-sans:'Inter',system-ui,sans-serif;
  /* the spacing scale (SITE_SPEC A-043): every margin, padding and gap in the ChART sheets is one of these */
  --sp-4:4px;
  --sp-6:6px;
  --sp-8:8px;
  --sp-10:10px;
  --sp-12:12px;
  --sp-14:14px;
  --sp-16:16px;
  --sp-20:20px;
  --sp-24:24px;
  --sp-28:28px;
  --sp-32:32px;
  --sp-36:36px;
  --sp-40:40px;
  --sp-44:44px;
  --sp-48:48px;
  --sp-56:56px;
  --sp-64:64px;
  --sp-68:68px;
  --sp-72:72px;
  --sp-88:88px;
  --sp-96:96px;
  --sp-140:140px;
  --ch-gut:40px;
  --ch-nl:0px;
  --ch-hdr:64px;
  --ch-black:#000;
  --ch-k020202:#020202;
  --ch-k030303:#030303;
  --ch-k050505:#050505;
  --ch-k060606:#060606;
  --ch-k070707:#070707;
  --ch-k080808:#080808;
  --ch-k0a0a0a:#0a0a0a;
  --ch-k0b0b0b:#0b0b0b;
  --ch-k0c0c0c:#0c0c0c;
  --ch-k0d0d0d:#0d0d0d;
  --ch-k101010:#101010;
  --ch-k111:#111;
  --ch-k121212:#121212;
  --ch-k151515:#151515;
  --ch-k1a1a1a:#1a1a1a;
  --ch-k1c1c1c:#1c1c1c;
  --ch-k1f1f1f:#1f1f1f;
  --ch-k333:#333;
  --ch-k444:#444;
  --ch-k4a4a4a:#4a4a4a;
  --ch-k555:#555;
  --ch-k666:#666;
  --ch-k777:#777;
  --ch-k7dffc4:#a2f9d1;
  --ch-k888:#888;
  --ch-k9a9a9a:#9a9a9a;
  --ch-kaaa:#aaa;
  --ch-kb8b8b8:#b8b8b8;
  --ch-kbdbdbd:#bdbdbd;
  --ch-kcfcfcf:#cfcfcf;
  --ch-kd0d0d0:#d0d0d0;
  --ch-kd4d4d4:#d4d4d4;
  --ch-kd6d6d6:#d6d6d6;
  --ch-kd8d8d8:#d8d8d8;
  --ch-kddd:#ddd;
  --ch-ke0e0e0:#e0e0e0;
  --ch-ke8e8e8:#e8e8e8;
  --ch-kff8aa8:#f9aec1;
  --ch-neon-cyan:#2dddf0;          /* neon a touch pastel (owner review 2026-10-21): lighter by 6%, saturation down 13% */
  --ch-neon-green:#2df0a5;
  --ch-neon-lime:#b9f02d;
  --ch-neon-magenta:#f355d5;
  --ch-rgba-0-0-0-p55:rgba(0,0,0,.55);
  --ch-rgba-0-0-0-p6:rgba(0,0,0,.6);
  --ch-rgba-0-0-0-p7:rgba(0,0,0,.7);
  --ch-rgba-0-0-0-p72:rgba(0,0,0,.72);
  --ch-rgba-0-0-0-p8:rgba(0,0,0,.8);
  --ch-rgba-0-0-0-p82:rgba(0,0,0,.82);
  --ch-rgba-0-229-255-p18:rgba(0,229,255,.18);
  --ch-rgba-0-229-255-p5:rgba(0,229,255,.5);
  --ch-rgba-182-255-0-p55:rgba(182,255,0,.55);
  --ch-rgba-255-255-255-p055:rgba(255,255,255,.055); /* the hero grid (mockup) */
  --ch-rgba-255-255-255-p3:rgba(255,255,255,.3);    /* the hero axis labels and last-close line (mockup) */
  --ch-rgba-255-255-255-p06:rgba(255,255,255,.06);
  --ch-rgba-255-255-255-p07:rgba(255,255,255,.07);
  --ch-rgba-255-255-255-p16:rgba(255,255,255,.16);
  --ch-rgba-255-255-255-p18:rgba(255,255,255,.18);
  --ch-white:#fff;

  --ui-ink:#2b3550;          /* crayon ink, every outline and label */
  --ui-navy:#13224f;         /* headings */
  --ui-yellow:#ffd84a;       /* primary label, active chip */
  --ui-hl:#fff1b8;           /* hover wash */
  --ui-paper:#fffdf5;        /* card surface */
  --ui-panel:#ffffff;        /* panel inside a card */
  --ui-muted:#5a6478;
  --ui-bad:#c8302a;
  --ui-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui-marker:"Permanent Marker","Segoe Print","Comic Sans MS",cursive;
  --ui-h:44px;               /* button and field height (UX sweep 127: one height, 44px, on every page) */
  --ui-r:10px;               /* button and field radius */
  --ui-r-card:20px;          /* card radius */
  --ui-r-panel:14px;         /* panel radius */
  --ui-shadow:3px 4px 0 rgba(30,70,110,.16);
  --ui-shadow-card:5px 7px 0 rgba(30,70,110,.16);
  --ui-ring:0 0 0 3px #ffe98a,0 0 0 5px var(--ui-ink);
}
/* ChART phone widths: the 16 px side gutter and the shorter header */
@media(max-width:760px){:root{--ch-gut:16px;--ch-hdr:58px}}