/* U.CASH fleet shared theme layer (ds/7). ONE source for the light-mode override rules used by
   the Next.js dapp family (bridge / swap / buy / get / sell / send) + the ULINK wallet drawer skin
   + the 3-state theme toggle styling. Consume with an SRI-pinned link (hash in ds/7/manifest.json):

     <link rel="stylesheet" href="https://cdn.u.cash/ds/7/theme.css"
           integrity="sha384-..." crossorigin="anonymous">

   Hooks: the Tailwind dapp family drives `html.light` / `html.dark` classes (set pre-paint by each
   app's THEME_INIT from the `ucash-theme` cookie: light | dark | system). The hub family drives
   `[data-theme="light|dark"]`; base rules below answer BOTH hooks so this sheet is fleet-reusable.
   Dark visuals are untouched: every rule here is light-scoped (or theme-neutral chrome).
   Version law: ds/N directories are immutable once published; ship fixes as ds/8. */

/* ===== Base: light theme (both hooks) ===== */
html.light, [data-theme="light"] { color-scheme: light; }
html.light, html.light body, [data-theme="light"], [data-theme="light"] body { background: #ffffff; color: #0a0a0a; }
html.light ::selection, [data-theme="light"] ::selection { background: #cc9933; color: #000; }
html.light .text-gold-2, [data-theme="light"] .text-gold-2 { color: #9c6f15; }
html.light .text-gold, [data-theme="light"] .text-gold { color: #a37a29; }
html.light .grad-gold, [data-theme="light"] .grad-gold {
  background: linear-gradient(100deg, #8a651f, #b38829 45%, #e6b347 70%, #b38829);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.light .border-line, [data-theme="light"] .border-line { border-color: rgba(0, 0, 0, .10); }
/* border-line-gold stays a gold accent border (brand); slight darken for white-bg legibility */
html.light .border-line-gold, [data-theme="light"] .border-line-gold { border-color: rgba(204, 153, 51, .35); }
html.light .glass, [data-theme="light"] .glass {
  background: rgba(0, 0, 0, .015); border: 1px solid rgba(0, 0, 0, .10);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
html.light .shadow-card, [data-theme="light"] .shadow-card { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .22); }
html.light .input-swap, [data-theme="light"] .input-swap {
  background: rgba(0, 0, 0, .04); border: 1px solid rgba(0, 0, 0, .12); color: #0a0a0a; border-radius: 0;
}
html.light .input-swap:focus, [data-theme="light"] .input-swap:focus { outline: none; border-color: #cc9933; }
/* Native <select> option popups: explicit colors keep the OS-rendered list on-theme. */
html.light .input-swap option, html.light select option, [data-theme="light"] select option { background-color: #ffffff; color: #0a0a0a; }
html.light .placeholder-white\/30::-moz-placeholder { color: rgba(10, 10, 10, .40); }
html.light .placeholder-white\/30::placeholder { color: rgba(10, 10, 10, .40); }
/* Sticky frosted family headers ride the white page in light mode. */
html.light .site-header, html.light .bridge-header { background-color: transparent; }

/* ===== Tailwind utility remaps (html.light hook; the dapp family's dark-only utilities) ===== */
html.light .text-white { color: #0a0a0a; }
html.light .text-white\/85 { color: rgba(10, 10, 10, .82); }
html.light .text-white\/80 { color: rgba(10, 10, 10, .80); }
html.light .text-white\/70 { color: rgba(10, 10, 10, .68); }
html.light .text-white\/65 { color: rgba(10, 10, 10, .64); }
html.light .text-white\/60 { color: rgba(10, 10, 10, .60); }
html.light .text-white\/55 { color: rgba(10, 10, 10, .55); }
html.light .text-white\/50 { color: rgba(10, 10, 10, .52); }
html.light .text-white\/45 { color: rgba(10, 10, 10, .48); }
html.light .text-white\/40 { color: rgba(10, 10, 10, .44); }
html.light .text-white\/35 { color: rgba(10, 10, 10, .40); }
html.light .text-white\/30 { color: rgba(10, 10, 10, .38); }
html.light .text-white\/25 { color: rgba(10, 10, 10, .32); }
html.light .hover\:text-white:hover { color: #0a0a0a; }
html.light .hover\:text-white\/70:hover { color: rgba(10, 10, 10, .68); }
html.light .text-gold-2\/80 { color: rgba(156, 111, 21, .85); }
html.light .bg-black { background-color: #ffffff; }
html.light .bg-black\/30 { background-color: rgba(0, 0, 0, .04); }
html.light .bg-black\/40 { background-color: rgba(0, 0, 0, .04); }
html.light .bg-black\/50 { background-color: rgba(0, 0, 0, .05); }
html.light .bg-black\/60 { background-color: rgba(0, 0, 0, .02); }
/* /70 + /75 are scrim layers (drawer backdrop, sticky bars); headers opt out via .bridge-header
   above. Kept as a real dimmer so white pages still get contrast behind sheets. */
html.light .bg-black\/70 { background-color: rgba(10, 10, 10, .45); }
html.light .bg-black\/75 { background-color: rgba(10, 10, 10, .45); }
html.light .bg-black\/95 { background-color: #ffffff; }
html.light .bg-bg-2 { background-color: #f4f4f5; }
html.light .bg-bg-2\/60 { background-color: rgba(244, 244, 245, .7); }
html.light .bg-bg-3 { background-color: #ececee; }
html.light .bg-white\/5 { background-color: rgba(0, 0, 0, .04); }
html.light .bg-white\/10 { background-color: rgba(0, 0, 0, .06); }
html.light .bg-white\/15 { background-color: rgba(0, 0, 0, .09); }
html.light .bg-white\/20 { background-color: rgba(0, 0, 0, .10); }
html.light .bg-white\/\[0\.02\] { background-color: rgba(0, 0, 0, .025); }
html.light .hover\:bg-white\/20:hover { background-color: rgba(0, 0, 0, .10); }
html.light .hover\:bg-panel:hover { background-color: rgba(0, 0, 0, .045); }
html.light .border-line\/60 { border-color: rgba(0, 0, 0, .08); }

/* ===== ULINK wallet drawer: light skin (dark visuals untouched; QR plate stays white in both) ===== */
html.light .uconnect-sheet {
  background-color: #ffffff;
  border-top-color: rgba(0, 0, 0, .10);
  box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, .28);
}
/* Installed-badge check circle ring (hook class on the border-[#0b0b0b] element in Ulink.tsx). */
html.light .uconnect-badge-ring { border-color: #ffffff; }

/* ===== 3-state theme toggle (Light / Dark / System): shared chrome, theme-neutral ===== */
.uxc-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 36px; height: 36px; border: 1px solid; border-radius: 8px;
  color: inherit; background: transparent; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.uxc-theme-toggle:hover { color: #cc9933; }
.uxc-theme-toggle.has-mode-label { width: auto; padding: 0 10px; }
.uxc-theme-toggle .theme-mode-label { font-size: 11px; letter-spacing: .02em; white-space: nowrap; }
html.light .uxc-theme-toggle, [data-theme="light"] .uxc-theme-toggle { border-color: rgba(0, 0, 0, .18); }

/* Theme-aware header logo/icon: show the variant that matches the page theme (off-theme hidden).
   logo-dark/icon-dark are white+gold (for dark bg); logo-light/icon-light are dark+gold (light bg). */
html.dark .uxc-logo-light, [data-theme="dark"] .uxc-logo-light { display: none !important; }
html.light .uxc-logo-dark, [data-theme="light"] .uxc-logo-dark { display: none !important; }