/* WL-VPN panel theme — maps the Tailwind palette used by panel pages onto
   Brand System 2.0 (brand/tokens.css). Accent channels switch with the theme:
   Pulse on dark surfaces, Pulse Deep on light ones (Pulse never goes on light). */

:root {
  /* accent scale, light theme (Pulse Deep family) */
  --acc-50: 232 245 242;
  --acc-100: 207 235 229;
  --acc-200: 159 214 203;
  --acc-300: 102 188 172;
  --acc-400: 0 143 116;    /* Pulse Deep */
  --acc-500: 0 143 116;
  --acc-600: 0 143 116;
  --acc-700: 0 117 95;     /* small text on white (AA) */
  --acc-800: 0 92 75;
  --acc-900: 0 66 54;
}

.dark,
.wl-surface-dark {
  /* accent scale, dark theme (Pulse family) */
  --acc-50: 143 251 227;   /* light shades are used as text on dark */
  --acc-100: 143 251 227;
  --acc-200: 143 251 227;
  --acc-300: 43 245 200;   /* Pulse */
  --acc-400: 43 245 200;
  --acc-500: 43 245 200;
  --acc-600: 43 245 200;
  --acc-700: 143 251 227;  /* Pulse hover */
  --acc-800: 143 251 227;
  --acc-900: 143 251 227;
}

a { color: inherit; }
a:hover { color: inherit; }

[x-cloak] { display: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--wl-line); border-radius: 8px; }

/* Dark-mode form controls (panel inputs carry no bg utility of their own) */
.dark { color-scheme: dark; }
.dark input:not([type=checkbox]):not([type=radio]), .dark select, .dark textarea {
  background-color: var(--wl-graphite);
  color: var(--wl-frost);
}
.dark input::placeholder, .dark textarea::placeholder { color: var(--wl-fog); }

/* Headings set tight; mono labels uppercase with tracking */
h1, h2, h3 { letter-spacing: -0.02em; }
.wl-label {
  font: var(--wl-text-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.wl-label-slash::before { content: "// "; color: var(--wl-pulse); }

/* Motion: one easing everywhere */
.transition, .transition-colors, .transition-transform, .transition-all {
  transition-timing-function: var(--wl-ease-signal);
}

/* Online indicator — dot with the brand "connected" ring */
.wl-live { position: relative; display: inline-flex; }
.wl-live .wl-ring {
  position: absolute; inset: 0; border-radius: 9999px;
  border: 1px solid currentColor;
  animation: wl-ring 2.4s var(--wl-ease-signal) infinite;
}

/* Content entrance — slides in left → right, once per page load.
   Fill mode must not be forwards/both: a held transform turns <main> into the containing
   block for position:fixed, so modals centre on the page content instead of the screen. */
.wl-enter { animation: wl-slide var(--wl-dur-base) var(--wl-ease-signal) backwards; }

@media (prefers-reduced-motion: reduce) {
  .wl-live .wl-ring, .wl-enter { animation: none !important; }
  .wl-live .wl-ring { display: none; }
}

/* Server OS logo (Manage Servers): Simple Icons SVG as a mask, tinted per distro. */
.os-logo {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  cursor: help;
  background-color: var(--os-light);
  -webkit-mask: var(--os-icon) center / contain no-repeat;
  mask: var(--os-icon) center / contain no-repeat;
}
.dark .os-logo { background-color: var(--os-dark); }
.os-logo-none {
  background: none;
  border: 1.5px dashed rgb(148 163 184 / 0.45);
  border-radius: 9999px;
  -webkit-mask: none;
  mask: none;
}