/* ==========================================================================
   OpenToAll — "Signal" design tokens
   Cool stone paper + logo indigo. Not cream/serif/terracotta, not acid-dark,
   not broadsheet. Signature: clone-weight bars (bandwidth honesty).
   Channels are "R G B" for Tailwind opacity modifiers.
   ========================================================================== */
:root {
  /* Surfaces */
  --background: 245 244 241;           /* Stone */
  --on-background: 14 21 37;           /* Ink */
  --surface: 245 244 241;
  --surface-dim: 228 226 221;
  --surface-bright: 255 255 255;
  --surface-container-lowest: 255 255 255;
  --surface-container-low: 250 249 246;
  --surface-container: 238 236 231;
  --surface-container-high: 228 226 221;
  --surface-container-highest: 214 212 206;
  --surface-variant: 228 226 221;
  --on-surface: 14 21 37;
  --on-surface-variant: 102 112 133;   /* Mute */
  --inverse-surface: 14 21 37;
  --inverse-on-surface: 245 244 241;
  --outline: 148 153 164;
  --outline-variant: 214 212 206;
  --surface-tint: 75 70 240;

  /* Signal indigo — logo */
  --primary: 75 70 240;
  --on-primary: 255 255 255;
  --primary-container: 55 50 210;
  --on-primary-container: 232 231 255;
  --inverse-primary: 180 178 255;
  --primary-fixed: 232 231 255;
  --primary-fixed-dim: 180 178 255;
  --on-primary-fixed: 14 12 80;
  --on-primary-fixed-variant: 55 50 210;

  /* Ember — community accent only */
  --secondary: 180 90 30;
  --on-secondary: 255 255 255;
  --secondary-container: 224 122 47;
  --on-secondary-container: 60 28 0;
  --secondary-fixed: 255 228 204;
  --secondary-fixed-dim: 255 186 140;
  --on-secondary-fixed: 45 20 0;
  --on-secondary-fixed-variant: 140 70 20;

  /* Merge green */
  --tertiary: 15 122 75;
  --on-tertiary: 255 255 255;
  --tertiary-container: 12 100 62;
  --on-tertiary-container: 186 245 214;
  --tertiary-fixed: 186 245 214;
  --tertiary-fixed-dim: 110 210 160;
  --on-tertiary-fixed: 0 40 24;
  --on-tertiary-fixed-variant: 12 100 62;

  --error: 186 26 26;
  --on-error: 255 255 255;
  --error-container: 255 218 214;
  --on-error-container: 147 0 10;
}

.dark {
  --background: 10 14 24;
  --on-background: 236 235 230;
  --surface: 10 14 24;
  --surface-dim: 10 14 24;
  --surface-bright: 40 46 60;
  --surface-container-lowest: 6 9 16;
  --surface-container-low: 16 21 34;
  --surface-container: 22 28 42;
  --surface-container-high: 32 38 54;
  --surface-container-highest: 44 50 66;
  --surface-variant: 44 50 66;
  --on-surface: 236 235 230;
  --on-surface-variant: 160 166 178;
  --inverse-surface: 236 235 230;
  --inverse-on-surface: 14 21 37;
  --outline: 120 126 140;
  --outline-variant: 55 62 78;
  --surface-tint: 180 178 255;

  --primary: 180 178 255;
  --on-primary: 20 18 90;
  --primary-container: 75 70 240;
  --on-primary-container: 232 231 255;
  --inverse-primary: 75 70 240;

  --secondary: 255 186 140;
  --on-secondary: 80 36 0;
  --secondary-container: 200 100 35;
  --on-secondary-container: 255 228 204;

  --tertiary: 110 210 160;
  --on-tertiary: 0 48 28;
  --tertiary-container: 12 100 62;
  --on-tertiary-container: 186 245 214;

  --error: 255 180 171;
  --on-error: 105 0 5;
  --error-container: 147 0 10;
  --on-error-container: 255 218 214;
}

/* ---- Base ---------------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: "ss01" on, "kern" on;
}

:focus-visible {
  outline: 2px solid rgb(var(--primary));
  outline-offset: 3px;
}

/* Quiet mesh — not decorative kente overload */
.kente-bg {
  background-image:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgb(var(--primary) / 0.08), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgb(var(--secondary-container) / 0.06), transparent);
}

.dot-bg {
  background-image: radial-gradient(rgb(var(--on-surface) / 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  animation: fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Signature: clone-weight meter */
.weight-meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.weight-meter span {
  width: 3px;
  border-radius: 1px;
  background: rgb(var(--outline-variant));
}
.weight-meter[data-level="1"] span:nth-child(1),
.weight-meter[data-level="2"] span:nth-child(1),
.weight-meter[data-level="2"] span:nth-child(2),
.weight-meter[data-level="3"] span {
  background: rgb(var(--primary));
}
.weight-meter span:nth-child(1) { height: 4px; }
.weight-meter span:nth-child(2) { height: 8px; }
.weight-meter span:nth-child(3) { height: 12px; }

.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity 0.2s; }