/* Calibexs Design System v1
   Shared purple/particles theme.
   OS + Radio intentionally excluded.
*/

:root {
  --calibexs-bg: #05010a;
  --calibexs-bg-alt: #090012;

  --calibexs-purple: #a855f7;
  --calibexs-purple-light: #d8b4fe;
  --calibexs-purple-soft: #c4b5fd;
  --calibexs-purple-deep: #7c3aed;
  --calibexs-blue: #818cf8;

  --calibexs-text: #f5f3ff;
  --calibexs-muted: #a78bfa;
  --calibexs-muted-2: #8b5cf6;

  --calibexs-card: rgba(255,255,255,.04);
  --calibexs-card-strong: rgba(255,255,255,.065);
  --calibexs-border: rgba(255,255,255,.08);
  --calibexs-border-hover: rgba(196,181,253,.24);

  --calibexs-ok: #86efac;
  --calibexs-warn: #fde68a;
  --calibexs-bad: #fecaca;

  --calibexs-radius-sm: 14px;
  --calibexs-radius-md: 20px;
  --calibexs-radius-lg: 28px;

  --calibexs-shadow: 0 20px 50px rgba(0,0,0,.25);
  --calibexs-blur: blur(18px);
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body.calibexs-theme {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, Arial, sans-serif;
  background: var(--calibexs-bg);
  color: var(--calibexs-text);
}

body.calibexs-theme a {
  color: inherit;
}

::selection {
  background: rgba(168,85,247,.34);
  color: #fff;
}

.calibexs-page {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: 40px 0 100px;
}

.calibexs-glass {
  background: var(--calibexs-card);
  border: 1px solid var(--calibexs-border);
  border-radius: var(--calibexs-radius-lg);
  backdrop-filter: var(--calibexs-blur);
  box-shadow: var(--calibexs-shadow);
}

.calibexs-purple-text {
  background: linear-gradient(
    135deg,
    #f5d0fe,
    var(--calibexs-purple-light),
    var(--calibexs-blue)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.calibexs-muted {
  color: var(--calibexs-muted);
}

.calibexs-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--calibexs-border);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--calibexs-purple-soft);
  font-size: 13px;
  font-weight: 700;
}

.calibexs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid rgba(168,85,247,.28);
  border-radius: 14px;
  background: rgba(168,85,247,.10);
  color: var(--calibexs-text);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease;
}

.calibexs-button:hover {
  transform: translateY(-1px);
  background: rgba(168,85,247,.16);
  border-color: rgba(192,132,252,.42);
}

.calibexs-input,
.calibexs-select,
.calibexs-textarea {
  width: 100%;
  border: 1px solid var(--calibexs-border);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: var(--calibexs-text);
  font: inherit;
  outline: none;
}

.calibexs-input,
.calibexs-select {
  min-height: 42px;
  padding: 9px 12px;
}

.calibexs-textarea {
  min-height: 120px;
  padding: 12px;
  resize: vertical;
}

.calibexs-input:focus,
.calibexs-select:focus,
.calibexs-textarea:focus {
  border-color: rgba(192,132,252,.52);
  box-shadow: 0 0 0 3px rgba(168,85,247,.09);
}

/* Shared particle canvas/background */
#particles-js.calibexs-particles,
.calibexs-particles#particles-js {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at top left, rgba(168,85,247,.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(99,102,241,.10), transparent 30%),
    var(--calibexs-bg);
}

/* Status colors are shared for pages that need them */
.calibexs-status-ok {
  color: var(--calibexs-ok);
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.28);
}

.calibexs-status-warn {
  color: var(--calibexs-warn);
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.28);
}

.calibexs-status-bad {
  color: var(--calibexs-bad);
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.28);
}

@media (max-width: 640px) {
  .calibexs-page {
    width: min(100% - 24px, 1200px);
    padding-top: 28px;
    padding-bottom: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  #particles-js.calibexs-particles,
  .calibexs-particles#particles-js {
    display: none;
  }
}