/* Single source of truth for the gold theme. Colors are RGB channels so both
   Tailwind (with /opacity modifiers) and plain CSS (rgb(var(--c-x) / .5)) can use them. */
:root{
  --c-ink:0 0 0;
  --c-ink-900:7 7 7;
  --c-ink-800:15 15 15;
  --c-ink-700:23 23 23;
  --c-ink-600:34 34 34;
  --c-gold:255 193 7;
  --c-gold-soft:255 213 79;
  --c-gold-deep:224 168 0;
  --c-bone:245 241 230;
  --c-mute:163 158 143;
  --c-faint:111 106 94;
  --c-up:47 214 123;
  --c-down:255 77 77;

  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}

html{scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
body{-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid rgb(var(--c-gold));outline-offset:3px;border-radius:6px}

.num{font-variant-numeric:tabular-nums}
.opsz{font-variation-settings:"opsz" 96}
.safe-top{padding-top:env(safe-area-inset-top,0px)}
.safe-bottom{padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}

.ping{box-shadow:0 0 0 0 rgb(var(--c-gold) / .6);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgb(var(--c-gold) / 0)}100%{box-shadow:0 0 0 0 rgb(var(--c-gold) / 0)}}

.chip[aria-pressed="true"]{background:rgb(var(--c-gold));color:#000;border-color:rgb(var(--c-gold))}
details summary::-webkit-details-marker{display:none}
details[open] .chev{transform:rotate(-135deg) translate(-2px,-2px)}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:rgb(var(--c-ink-900))}
::-webkit-scrollbar-thumb{background:rgb(var(--c-ink-600));border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgb(var(--c-gold) / .5)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}