/* Stryx brand tokens + logo behaviour.
   Import once, e.g. in your global stylesheet. */

:root {
  --stryx-bg: #F6F5FF;
  --stryx-card: #FFFFFF;
  --stryx-ink: #14131F;
  --stryx-sub: #5F5E5A;
  --stryx-line: #E4E2F5;
  --stryx-accent: #7F77DD;      /* violet: light mode */
  --stryx-on-accent: #FFFFFF;
  /* State colours: only for status. Never rely on colour alone, pair with a glyph. */
  --stryx-fail: #C0392B;
  --stryx-pending: #B26B00;
  /* Decorative second glow, a soft lilac (landing page backgrounds, card washes, charts). Never for status
     or text, and never as a replacement for the accent. */
  --stryx-glow: #B9AEF6;
}

[data-theme="dark"] {
  --stryx-bg: #0E0F0A;
  --stryx-card: #181A12;
  --stryx-ink: #F4F6EC;
  --stryx-sub: #B4B2A9;
  --stryx-line: #2A2D20;
  --stryx-accent: #CCFF00;      /* electric lime: dark mode */
  --stryx-on-accent: #0E0F0A;
  --stryx-fail: #FF5C5C;
  --stryx-pending: #FFB020;
  --stryx-glow: #8F85E6;
}

body { background: var(--stryx-bg); color: var(--stryx-ink); }
.btn-primary { background: var(--stryx-accent); color: var(--stryx-on-accent); }

/* Inline the SVGs (not <img>) so currentColor and --stryx-accent apply. */
.stryx-logo { color: var(--stryx-ink); }

/* Header-size lockup: atom mark about 40px, wordmark cap height about 18px.
   The mark and wordmark ratio is fixed inside the SVG, so one height scales both.
   Mobile drops to 80% so the proportions hold. */
.stryx-lockup { display: block; height: 41px; width: auto; }
@media (max-width: 640px) { .stryx-lockup { height: 33px; } }

/* Electrons orbit continuously */
.stryx-e {
  offset-path: path("M32,4 a12,28 0 1,0 0.01,0");
  offset-rotate: 0deg;
  animation: stryx-orb 7s linear infinite;
}
.stryx-e2 { animation-delay: -2.3s; }
.stryx-e3 { animation-delay: -4.6s; }
@keyframes stryx-orb { to { offset-distance: 100%; } }

/* Add .is-charged to the logo on theme switch or mint success, then remove it */
.stryx-orbits, .stryx-bolt { transform-origin: center; transform-box: view-box; }
/* "center" is the centre of the nearest SVG viewport. The standalone mark IS that viewport (64x64);
   in the lockup the atom must be wrapped in its own <svg viewBox="0 0 64 64">, or the spin pivots on
   the centre of the whole lockup and the atom swings out of place (the landing page's inline copy is wrapped; the dashboard uses wrapAtomViewport). */
/* The X sits inside an outer <g transform="translate(...)"> that positions it.
   A CSS transform replaces the transform attribute on the SAME element, so the
   animated group must not carry the translate itself. */
.stryx-x { transform-box: fill-box; transform-origin: center; }

.is-charged .stryx-e { animation-duration: 1.1s; }
.is-charged .stryx-orbits { animation: stryx-tilt .75s cubic-bezier(.3,1.4,.5,1); }
.is-charged .stryx-bolt { animation: stryx-zap .55s ease; }
.is-charged .stryx-x { animation: stryx-snap .55s ease .08s; }

@keyframes stryx-tilt { from { transform: rotate(0); } to { transform: rotate(60deg); } }
@keyframes stryx-zap {
  0%   { transform: none; }
  25%  { transform: translate(-2px,-3px) rotate(-10deg) scale(1.25); }
  55%  { transform: translate(1px,2px) rotate(5deg) scale(.95); }
  100% { transform: none; }
}
@keyframes stryx-snap {
  0%   { transform: scale(1) rotate(0); }
  35%  { transform: scale(.55) rotate(45deg); }
  100% { transform: scale(1) rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .stryx-e, .is-charged * { animation: none !important; }
}

/* Scrollbars are hidden EVERYWHERE by default: content stays fully scrollable by wheel,
   touch and keyboard, it just never paints a bar. This is the one rule that keeps the
   landing page's own long body scroll, the dashboard's app-shell (sidebar/header fixed,
   only the main content region scrolls), and every other box in both apps bar-free with no
   per-element opt-out needed anywhere. Only `.stryx-scroll` (below) opts a specific
   container back into a visible bar. */
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
}

/* Ghost scrollbar, opt-in: add `.stryx-scroll` to a container that should show one (list
   boxes, dropdown panels, feeds, tables that can scroll horizontally). Never add scrollbar
   CSS in a component's own stylesheet; add this class there instead, and change the style
   here if it ever needs to change. Invisible at rest, fades to the theme's accent (violet
   light, lime dark) on hover or keyboard focus within the container. Never fully hidden:
   touch devices, with no hover to reveal it, keep a faint thumb at rest. */
.stryx-scroll::-webkit-scrollbar {
  display: block;
  width: 6px;
  height: 6px;
}
.stryx-scroll::-webkit-scrollbar-button { display: none; }
.stryx-scroll::-webkit-scrollbar-track { background: transparent; }
.stryx-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 99px;
  transition: background 200ms ease;
}
.stryx-scroll:hover::-webkit-scrollbar-thumb,
.stryx-scroll:focus-within::-webkit-scrollbar-thumb {
  background: var(--stryx-accent);
}
@media (hover: none) {
  .stryx-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--stryx-accent) 40%, transparent);
  }
}

/* Firefox has no ::-webkit-scrollbar selector to feature-test directly, so this query is
   true only there. Chrome 121+ lets scrollbar-width/-color override the ::-webkit-scrollbar-*
   rules above if both are set on the same element, so the standard properties must stay out
   of reach of any browser that also matches ::-webkit-scrollbar, or the ghost styling above
   silently gets replaced by the browser's own default thin scrollbar. */
@supports not selector(::-webkit-scrollbar) {
  .stryx-scroll {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .stryx-scroll:hover,
  .stryx-scroll:focus-within {
    scrollbar-color: var(--stryx-accent) transparent;
  }
  @media (hover: none) {
    .stryx-scroll { scrollbar-color: color-mix(in srgb, var(--stryx-accent) 40%, transparent) transparent; }
  }
}