backspace/packages/web/src/styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* ── Matte Surfaces (RGB channels for Tailwind opacity support) ── */
    --bg-base: 11 11 16;
    --bg-channel: 26 26 35;
    --bg-chat: 19 19 26;
    --bg-members: 26 26 35;
    --bg-elevated: 37 37 48;
    --bg-input: 17 17 24;
    --bg-overlay: rgba(0, 0, 0, 0.85);

    /* ── Borders ── */
    --border-hard: 34 34 44;
    --border-soft: 42 42 54;

    /* ── Pastel Accents ── */
    --accent-mint: 134 239 172;
    --accent-peach: 252 165 165;
    --accent-lavender: 196 181 253;
    --accent-sky: 125 211 252;
    --accent-amber: 252 211 77;
    --accent-rose: 253 164 175;
    --accent-coral: 251 146 60;

    /* ── Primary Action (replaces blurple) ── */
    --accent-primary: 124 108 246;
    --accent-primary-hover: 107 92 224;
    --accent-primary-active: 95 79 208;

    /* ── Text Hierarchy ── */
    --text-primary: 239 239 239;
    --text-secondary: 160 160 170;
    --text-tertiary: 92 92 104;
    --text-category: 72 72 84;
    --text-message: 216 216 222;
    --text-link: 125 211 252;
    --text-positive: 134 239 172;
    --text-warning: 252 211 77;
    --text-danger: 252 165 165;

    /* ── Interactive ── */
    --interactive-hover: rgba(255, 255, 255, 0.06);
    --interactive-active: rgba(255, 255, 255, 0.12);
    --interactive-selected: rgba(255, 255, 255, 0.16);
    --interactive-muted: 58 58 68;

    /* ── Status ── */
    --status-online: 134 239 172;
    --status-idle: 252 211 77;
    --status-dnd: 252 165 165;
    --status-offline: 58 58 68;

    /* ── Glass Material ── */
    --glass-bg: rgba(20, 20, 26, 0.52);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-highlight: rgba(255, 255, 255, 0.05);

    /* ── Notification ── */
    --notification: 253 164 175;
  }

  * {
    @apply border-0;
    outline: none !important;
  }

  ::selection {
    background: rgba(134, 239, 172, 0.25);
    color: rgb(var(--text-primary));
  }

  html, body, #root {
    @apply h-full w-full overflow-hidden bg-surface-base text-txt-message;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Thin scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgb(var(--bg-input));
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--bg-channel));
  }

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

  /* Dark theme auto-fill */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 1000px #111118 inset;
    transition: background-color 5000s ease-in-out 0s;
  }
}

@layer components {
  /* Standard glass — popovers, floating elements */
  .glass {
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.25),
      0 8px 24px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 var(--glass-highlight);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  /* Space strip glass — no border-radius, rightward shadow */
  .glass-strip {
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    background: var(--glass-bg);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.03),
      2px 0 12px rgba(0, 0, 0, 0.20);
  }

  /* Floating bubble glass — bottom bar, input pill */
  .glass-bubble {
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.20),
      0 8px 24px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 var(--glass-highlight);
  }

  /* Reaction pill glass — lighter blur for small inline elements */
  .glass-pill {
    backdrop-filter: blur(12px) saturate(110%);
    -webkit-backdrop-filter: blur(12px) saturate(110%);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }
  .glass-pill:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.14);
  }
  .glass-pill-mine {
    background: rgba(134, 239, 172, 0.10);
    border-color: rgba(134, 239, 172, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(134, 239, 172, 0.06);
  }
  .glass-pill-mine:hover {
    background: rgba(134, 239, 172, 0.16);
  }
}

/* Accessibility: fall back to solid surfaces when transparency is reduced */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(var(--bg-channel));
  }
  .glass-strip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(var(--bg-channel));
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.20);
  }
  .glass-bubble {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(var(--bg-elevated));
  }
  .glass-pill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(var(--bg-elevated));
  }
}

@layer utilities {
  .rounded-inherit {
    border-radius: inherit;
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: 4px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 100px;
  }
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.15s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.15s ease-out;
}

@keyframes typingFadeIn {
  from { transform: translateY(4px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-typing-in {
  animation: typingFadeIn 0.15s ease-out;
}

@keyframes gradientPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.animate-gradient-pulse {
  animation: gradientPulse 4s ease-in-out infinite;
}

@keyframes search-flash {
  0% { background-color: rgba(124, 108, 246, 0.2); }
  100% { background-color: transparent; }
}
.search-highlight { animation: search-flash 2s ease-out; }

@keyframes stepForward {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes stepBack {
  from { transform: translateX(-24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.animate-step-forward {
  animation: stepForward 0.25s ease-out;
}
.animate-step-back {
  animation: stepBack 0.25s ease-out;
}