/* ============================================================
   Legacy Hart — Design tokens & base styles
   White-label theming via CSS variables.
   Color channels stored as "R G B" for Tailwind alpha support.
   ============================================================ */

:root {
  /* Default tenant brand: confident blue -> teal */
  --c-brand: 79 124 255;     /* #4F7CFF */
  --c-brand-2: 45 212 191;   /* #2DD4BF */
  --c-brand-ink: 255 255 255;
  --brand-grad: linear-gradient(135deg, rgb(var(--c-brand)) 0%, rgb(var(--c-brand-2)) 100%);
}

/* ---------- LIGHT THEME ---------- */
:root, .light {
  --c-base: 255 255 255;
  --c-subtle: 246 247 249;
  --c-panel: 255 255 255;
  --c-raised: 255 255 255;
  --c-line: 229 231 236;
  --c-line-strong: 214 217 223;
  --c-ink: 13 15 20;
  --c-ink-dim: 88 93 104;
  --c-ink-faint: 150 156 167;
  --c-ok: 22 163 90;
  --c-warn: 201 138 18;
  --c-info: 41 102 235;
  --c-bad: 218 60 52;
  --c-off: 148 154 165;
  color-scheme: light;
}

/* ---------- DARK THEME ---------- */
.dark {
  --c-base: 9 10 12;        /* near black, cool */
  --c-subtle: 18 20 23;
  --c-panel: 21 23 27;
  --c-raised: 27 30 35;
  --c-line: 38 41 47;
  --c-line-strong: 52 56 64;
  --c-ink: 241 243 246;
  --c-ink-dim: 159 165 176;
  --c-ink-faint: 104 110 122;
  --c-ok: 45 213 118;
  --c-warn: 245 181 61;
  --c-info: 96 152 255;
  --c-bad: 246 92 80;
  --c-off: 107 113 125;
  color-scheme: dark;
}

* { -webkit-font-smoothing: antialiased; }
html, body, #root { height: 100%; }
body { margin: 0; }

::selection { background: rgb(var(--c-brand) / 0.28); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--c-line-strong));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-ink-faint)); background-clip: padding-box; }

/* Focus ring */
.fr:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgb(var(--c-brand));
  outline-offset: 2px;
}

/* Brand gradient text */
.brand-grad-text {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-grad-bg { background: var(--brand-grad); }

/* Skeleton shimmer */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgb(var(--c-line) / 0.6);
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(var(--c-ink) / 0.06), transparent);
  animation: shimmer 1.6s infinite;
}

/* Status dot pulse */
.pulse-dot { position: relative; }
.pulse-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: currentColor; opacity: 0.5;
  animation: pingRing 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes pingRing { 0% { transform: scale(.9); opacity:.55 } 80%,100% { transform: scale(2.3); opacity:0 } }

/* Grid texture for placeholders */
.grid-texture {
  background-image:
    linear-gradient(rgb(var(--c-line) / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--c-line) / 0.5) 1px, transparent 1px);
  background-size: 28px 28px;
}
.diag-texture {
  background-image: repeating-linear-gradient(45deg, rgb(var(--c-line) / 0.6) 0 1px, transparent 1px 11px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Range input theming */
input[type="range"] { accent-color: rgb(var(--c-brand)); }

/* hide number spinners */
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

.tnum { font-variant-numeric: tabular-nums; }