/* whir skin — neo-brutalist: dark page + WHITE form cards (black text) with hard
   offset shadows (zero blur), gold CTA, mono accents. Layered over the whir theme.
   Cards flip to light by re-declaring the text/surface vars at the .card scope. */

[data-skin="whir"] .svc-title { font-size: 44px; font-weight: 800; letter-spacing: -.03em; }
@media(min-width:860px){ [data-skin="whir"] .svc-title { font-size: 58px; } }
[data-skin="whir"] .svc-sub { font-size: 16px; }
[data-skin="whir"] .hero { padding-top: 30px; }

/* WHITE cards with black outline + gold hard-shadow; inner text flips dark via vars */
[data-skin="whir"] .card {
  --fg: #141414; --fg-2: #4a4a4a; --fg-3: #7c7c7c;
  --void: #ffffff; --ink-900: #ffffff; --ink-850: #ffffff; --ink-800: #f1f1f1;
  --border: rgba(0,0,0,.16); --border-2: rgba(0,0,0,.3);
  background: #ffffff; border: 1.5px solid #111; border-radius: 6px;
  box-shadow: 7px 7px 0 0 rgba(249,188,93,.5);
}
[data-skin="whir"] .aside .card { box-shadow: 6px 6px 0 0 rgba(0,0,0,.28); }
[data-skin="whir"] .card__t::before { box-shadow: none; }

/* sharp corners on inner controls (whir uses ~5px) + subtle grey hard shadow on inputs */
[data-skin="whir"] .inp, [data-skin="whir"] .pill, [data-skin="whir"] .est,
[data-skin="whir"] .addr-box, [data-skin="whir"] .copy, [data-skin="whir"] .outrm { border-radius: 5px; }
[data-skin="whir"] .inp { box-shadow: 3px 3px 0 0 rgba(0,0,0,.1); }
[data-skin="whir"] .inp:focus { box-shadow: 3px 3px 0 0 rgba(249,188,93,.55); }

/* gold CTA with BLACK hard-shadow, uppercase mono, press-in on hover */
[data-skin="whir"] .btn {
  border-radius: 5px; border: 1.5px solid #111; text-transform: uppercase;
  letter-spacing: .09em; font-weight: 700; box-shadow: 5px 5px 0 0 #111;
}
[data-skin="whir"] .btn:hover { transform: translate(2px,2px); box-shadow: 3px 3px 0 0 #111; filter: none; }
[data-skin="whir"] .btn:active { transform: translate(5px,5px); box-shadow: 0 0 0 0 #111; }
[data-skin="whir"] .btn--sec { background: #fff; box-shadow: 4px 4px 0 0 rgba(0,0,0,.4); }
[data-skin="whir"] .btn--sec:hover { background: #f3f3f3; transform: translate(2px,2px); box-shadow: 2px 2px 0 0 rgba(0,0,0,.4); }

/* delay/coin pills: selected = solid gold block with black text (whir-style) */
[data-skin="whir"] .pill.on { background: #f9bc5d; color: #111; border-color: #111; box-shadow: 2px 2px 0 0 #111; }

/* address in the deposit view stays legible on white */
[data-skin="whir"] .addr { color: #b8801f; }
[data-skin="whir"] .card__t { color: #6a6a6a; }