/* ============================================================
   $NORMIE — design tokens
   ------------------------------------------------------------
   Sampled straight off the artwork, which is a hand-drawn meme
   on a white sheet. Three colours do 98% of the work:

     #f8f8f8  67%  the paper
     #f08020  17%  the shirt
     #101010   8%  the pen

   So the site is a PRINTED PAGE, not a trading terminal. Hard
   black rules, zero corner radius, offset shadows that look
   like a second pass of the same ink, and one loud orange used
   as a fill rather than a glow. The deliberate distance from
   the rest of the family: BABY CATE is warm paper with soft
   shadows and round corners; this is the opposite of that in
   every one of those three choices.

   Committed to light. A meme drawn in black on white does not
   have a dark mode — inverting it would make the artwork float
   in a void and turn the orange radioactive. `color-scheme` is
   declared so form controls follow the page rather than the OS.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- paper ---- */
  --paper: #ffffff;
  --paper-2: #f7f5f1;
  --paper-3: #efece5;

  /* ---- the pen ----
     Measured against the paper, not chosen by eye. Every step in this ramp
     clears 4.5:1 on white, because every one of them is used for text at
     12px or smaller somewhere on the page — labels, captions, the wallet
     rows. The first pass had --ink-3 at 4.29 and --ink-4 at 2.4, which is
     legible on a good monitor in a dark room and nowhere else.

       --ink    #0a0a0a  21.0 : 1
       --ink-2  #3a3936   9.9 : 1   body copy
       --ink-3  #63615c   6.1 : 1   labels, meta
       --ink-4  #767470   4.7 : 1   the faintest thing allowed */
  --ink: #0a0a0a;
  --ink-2: #3a3936;
  --ink-3: #63615c;
  --ink-4: #767470;

  /* ---- the shirt ----
     #f08020 is the measured average of 55,190 pixels of it. The hot and deep
     variants are the same hue lightened and darkened, not different hues, so
     a hover state never looks like a different brand. */
  --orange: #f08020;
  --orange-hot: #ff9a3c;
  --orange-deep: #a5520a;
  --orange-wash: #fdf0e2;

  /* Bitcoin's own orange, used ONLY for things that are literally BTC —
     the sats counters, the coin glyph. Close enough to the shirt to belong,
     different enough to mean something. */
  --btc: #f7931a;

  /* ---- signal ---- */
  --good: #0f7a38;
  --bad: #c0301b;
  --warn: #92590a;

  /* ---- shape ----
     Brutalist: no radius anywhere, and shadows are HARD offsets of solid
     ink. A blurred shadow would read as a card floating above a surface;
     this reads as a second impression of the same stamp. */
  --r: 0px;
  --edge: 2px;
  --edge-hi: 3px;
  --drop: 5px 5px 0 var(--ink);
  --drop-lg: 9px 9px 0 var(--ink);
  --drop-orange: 5px 5px 0 var(--orange);

  --shell: 1180px;
  --bar-inner: 60px;
  /* The border counts toward the sticky bar's height. Defined apart, every
     "below the bar" calculation is off by exactly the border width — which
     is how a hero ends up one hairline past the fold. Learned on CATEWHEEL. */
  --bar: calc(var(--bar-inner) + var(--edge-hi));

  --display: "Archivo Black", "Arial Black", Impact, system-ui, sans-serif;
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The UA sheet's [hidden] rule loses on specificity to any display
   declaration, which is how a "hidden" copy button ends up visible and
   clickable, copying nothing. Learned on CATEWHEEL. */
[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 16px);
  background: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* The page is a stack of full-bleed bands; nothing should ever scroll
     sideways. Wide children (tables, the address row) scroll inside
     themselves instead — see .scroll-x in app.css. */
  overflow-x: hidden;
}

/* width/height attributes are presentational hints, and aspect-ratio is
   ignored once BOTH dimensions resolve to a length. Without this, setting
   only a CSS width leaves the attribute height in force and the image
   renders at the wrong shape. Learned on CATEWHEEL. */
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

::selection {
  background: var(--orange);
  color: var(--paper);
}