* {
       font-family: 'Roboto', system-ui, sans-serif;
  }

  /* Primary Blue Color Classes */
  .primaryblue {
      color: #4a54e8 !important;
  }

  .primaryblue-bg {
      background-color: #4a54e8 !important;
  }
  
  .primaryblue-bg-50 {
      background-color: rgba(37, 150, 190, 0.1) !important;
  }
  
  .primaryblue-bg-100 {
      background-color: rgba(37, 150, 190, 0.2) !important;
  }

  .primaryblue-border {
      border-color: #4a54e8 !important;
  }
  
  .primaryblue-border-100 {
      border-color: rgba(37, 150, 190, 0.2) !important;
  }
  
  .primaryblue-border-300 {
      border-color: rgba(37, 150, 190, 0.4) !important;
  }

  .primaryblue-hover:hover {
      color: #4a54e8 !important;
  }

  .primaryblue-bg-hover:hover {
      background-color: #4a54e8 !important;
  }
  
  .primaryblue-bg-hover-50:hover {
      background-color: rgba(37, 150, 190, 0.1) !important;
  }
  
  .primaryblue-bg-hover-100:hover {
      background-color: rgba(37, 150, 190, 0.2) !important;
  }
  
  .primaryblue-border-hover-100:hover {
      border-color: rgba(37, 150, 190, 0.2) !important;
  }
  
  .primaryblue-border-hover-300:hover {
      border-color: rgba(37, 150, 190, 0.4) !important;
  }
  
  /* Focus states */
  .focus-primaryblue:focus {
      border-color: #4a54e8 !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(37, 150, 190, 0.1) !important;
  }
  
  .focus-ring-primaryblue:focus {
      --tw-ring-color: #4a54e8 !important;
  }

  .shadow-card {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .shadow-nav {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .active-tab {
      border-bottom: 3px solid #4a54e8;
      color: #4a54e8;
  }

  .search-result {
      animation: slideDown 0.3s ease-out;
  }

  #search-results {
    top:3.5rem;
    width:100%;
  }

  .sticky-sidebar {
      position: sticky;
      top: 100px;
      height: calc(100vh - 120px);
      overflow-y: auto;
  }

  .sticky-sidebar::-webkit-scrollbar {
      width: 4px;
  }

  .sticky-sidebar::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
  }

  .sticky-sidebar::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 10px;
  }

  .sticky-sidebar::-webkit-scrollbar-thumb:hover {
      background: #a1a1a1;
  }

  @keyframes slideDown {
      from {
          opacity: 0;
          transform: translateY(-10px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(-10px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @keyframes blob {
      0% {
          transform: translate(0px, 0px) scale(1);
      }

      33% {
          transform: translate(30px, -50px) scale(1.1);
      }

      66% {
          transform: translate(-20px, 20px) scale(0.9);
      }

      100% {
          transform: translate(0px, 0px) scale(1);
      }
  }

  .animate-fadeIn {
      animation: fadeIn 0.3s ease-out;
  }

  .animate-blob {
      animation: blob 7s infinite;
  }

  .animation-delay-2000 {
      animation-delay: 2s;
  }

  .shadow-nav {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }

  /* Gradient border effect for search on focus */
  #search-input:focus {
      background: linear-gradient(white, white) padding-box,
          linear-gradient(135deg, #4a54e8, #4ab3d5) border-box;
      border: 2px solid transparent;
  }

  html.dark-theme {
      color-scheme: dark;
  }

  html.dark-theme body {
      background: #0f172a !important;
      color: #e5e7eb;
  }

  html.dark-theme header,
  html.dark-theme .bg-white {
      background-color: #111827 !important;
      color: #e5e7eb !important;
  }

  html.dark-theme .bg-gray-50,
  html.dark-theme .bg-gray-100 {
      background-color: #1f2937 !important;
  }

  html.dark-theme .bg-gray-200 {
      background-color: #374151 !important;
  }

  html.dark-theme .text-gray-900,
  html.dark-theme .text-gray-800,
  html.dark-theme .text-gray-700 {
      color: #f3f4f6 !important;
  }

  html.dark-theme .text-gray-600,
  html.dark-theme .text-gray-500,
  html.dark-theme .text-gray-400 {
      color: #cbd5e1 !important;
  }

  html.dark-theme .border,
  html.dark-theme .border-t,
  html.dark-theme .border-b,
  html.dark-theme .border-l,
  html.dark-theme .border-r,
  html.dark-theme .border-gray-100,
  html.dark-theme .border-gray-200,
  html.dark-theme .border-gray-300 {
      border-color: #334155 !important;
  }

  html.dark-theme input,
  html.dark-theme textarea,
  html.dark-theme select,
  html.dark-theme .global-search-input {
      background-color: #0f172a !important;
      border-color: #334155 !important;
      color: #f8fafc !important;
  }

  html.dark-theme input::placeholder,
  html.dark-theme textarea::placeholder {
      color: #94a3b8 !important;
  }

  html.dark-theme .shadow-card,
  html.dark-theme .shadow-nav,
  html.dark-theme .shadow-lg,
  html.dark-theme .shadow-xl,
  html.dark-theme .shadow-2xl {
      box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35) !important;
  }

  html.dark-theme .hover\:bg-gray-50:hover,
  html.dark-theme .hover\:bg-gray-100:hover {
      background-color: #1e293b !important;
  }

  html.dark-theme .primaryblue-bg-50,
  html.dark-theme .primaryblue-bg-100,
  html.dark-theme .primaryblue-bg-hover-50:hover,
  html.dark-theme .primaryblue-bg-hover-100:hover {
      background-color: rgba(74, 84, 232, 0.18) !important;
  }

  html.dark-theme .post-content-body,
  html.dark-theme .feed-item {
      color: #e5e7eb !important;
  }

  html.dark-theme .feed-item:hover {
      background-color: #172033 !important;
  }

  html.dark-theme .comment-card,
  html.dark-theme .comment-composer {
      background-color: #111827 !important;
      border-color: #334155 !important;
  }

  html.dark-theme .theme-toggle {
      background-color: #1e293b !important;
      color: #facc15 !important;
  }

  html.dark-theme .global-search-results,
  html.dark-theme #notification-dropdown,
  html.dark-theme .post-menu,
  html.dark-theme .comment-menu {
      background-color: #111827 !important;
      border-color: #334155 !important;
  }

  html.dark-theme .sticky-sidebar::-webkit-scrollbar-track {
      background: #111827;
  }

  html.dark-theme .sticky-sidebar::-webkit-scrollbar-thumb {
      background: #475569;
  }

  html.dark-theme a:not(.primaryblue):not(.text-white) {
      color: inherit;
  }