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

:root {
  --stryx-bg: #F1EEE7;
  --stryx-card: #FFFFFF;
  --stryx-ink: #071411;
  --stryx-sub: #52675F;
  --stryx-line: #D6DFD9;
  --stryx-accent: #367F73;      /* Mintix teal: light mode */
  --stryx-on-accent: #FFFFFF;
  /* State colours: only for status. Never rely on colour alone, pair with a glyph. */
  --stryx-fail: #A54332;
  --stryx-pending: #806134;
  /* 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: #D8C29D;
}

[data-theme="dark"] {
  --stryx-bg: #071411;
  --stryx-card: #0D1C18;
  --stryx-ink: #F1EEE7;
  --stryx-sub: #A7B5AD;
  --stryx-line: #293E35;
  --stryx-accent: #65AA9D;      /* Mintix soft mint: dark mode */
  --stryx-on-accent: #071411;
  --stryx-fail: #D77C6B;
  --stryx-pending: #D8C29D;
  --stryx-glow: #3F8F83;
}

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. */
.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 X sits inside an outer <g transform="translate(...)"> that positions it. */
.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. */
* {
  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). */
.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. */
@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; }
  }
}

/* Mintix mineral glass palette, preserving the supplied interface structure. */
:root{--stryx-bg:#f1f0e8;--stryx-card:#fffdf1d9;--stryx-ink:#173834;--stryx-sub:#49635d;--stryx-line:#789b9055;--stryx-accent:#2f665b;--stryx-on-accent:#fffbed;--glass:#fffdf1c9}
[data-theme="dark"]{--stryx-bg:#101f20;--stryx-card:#233c38e0;--stryx-ink:#e4ebe7;--stryx-sub:#b4c8c1;--stryx-line:#789b904d;--stryx-accent:#decaa4;--stryx-on-accent:#172a25;--glass:#233c38cc}