:root {
   --color-accent: #0091FF;
   --color-primary: #008EF4;
   --color-destructive: var(--color-red-500);
}

.light {
   --color-ring: black;
   --color-muted: color-mix(in hsl, white 95%, black 5%);
   --color-foreground: black;
   --color-card-foreground: black;
   --color-muted-foreground: color-mix(in hsl, white 30%, black 70%);
   --color-popover-foreground: black;
   --color-secondary-foreground: black;
   --color-destructive-foreground: white;
   --color-secondary: color-mix(in hsl, white 95%, black 5%);
   --color-card: color-mix(in hsl, white 95%, black 5%);
   --color-input: color-mix(in hsl, white 80%, black 20%);
   --color-border: color-mix(in hsl, white 90%, black 10%);
   --color-background: color-mix(in hsl, white 90%, black 10%);
}

.dark {
   --color-ring: white;
   --color-muted: color-mix(in hsl, black 95%, white 5%);
   --color-foreground: white;
   --color-card-foreground: white;
   --color-muted-foreground: color-mix(in hsl, black 30%, white 70%);
   --color-popover-foreground: white;
   --color-secondary-foreground: white;
   --color-destructive-foreground: black;
   --color-secondary: color-mix(in hsl, black 95%, white 5%);
   --color-card: color-mix(in hsl, black 95%, white 5%);
   --color-input: color-mix(in hsl, black 80%, white 20%);
   --color-border: color-mix(in hsl, black 90%, white 10%);
   --color-background: color-mix(in hsl, black 90%, white 10%);
}

* { --tw-shadow: none; }
.border { border-width: 0px; }

.light *, .light :after, .light :before, .light ::backdrop { text-shadow: 0px 1px 1px rgba(255,255,255,0.8); }
.dark  *, .dark :after, .dark :before, .dark ::backdrop { text-shadow: 0px 1px 1px rgba(0,0,0,0.8); }

.bg-primary, .bg-primary:hover {
   background: linear-gradient(var(--color-accent), color-mix(in hsl, var(--color-accent) 80%, black 20%)) !important;
   text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}

.bg-primary:active {
   background: linear-gradient(color-mix(in hsl, var(--color-accent) 80%, black 20%), var(--color-accent)) !important;
}

aside span[role="img"] { border-radius: 0px !important; }

#ui-dropdown-trigger > button > span[class *= "absolute"], a[href="/messages"] > button > span[class *= "absolute"] {
   border-radius: 50px;
   background: linear-gradient(red, color-mix(in hsl, red 90%, black));
}

.bg-muted { background: transparent; }
.outline, .outline-1 { outline-width: 0px; }

#forum-category, .border-primary, #post-card, div[data-profile-preview="true"] { border: none; }
#post-rating-badge, #post-category-badge { font-size: 0.8em; }
#ui-card-title span { font-size: 1em; }

#post-card, #sidebar-popular-tags, #sidebar-recent-comments, #sidebar-featured, #sidebar-dailyjak, #settings-grid > div, #user-info-stats-grid > a, div[data-profile-preview="true"], #banner-pending-posts, #tag-diff-item, #ui-card-title span, #user-info-bio-section, input, form { border-radius: 10px; }
div[class="w-16 h-16 bg-green-500/10 flex items-center justify-center mb-4"], header #tag-input-container, header form { border-radius: 50px; }

button, #ui-button, code, .bbcode-quote-link, img, #edit-tags-menu-content #tag-input-container, #sidebar-recent-comments a[href*="/post/view/"] div, span[class="text-sm text-white min-w-[60px] text-center bg-background/80 backdrop-blur px-2 py-1"], blockquote, textarea { border-radius: 5px; }

.light .shadow-\[2px_2px_0_0_rgba\(0\,0\,0\,0\.25\)\], .light .shadow-\[4px_4px_0_0_rgba\(0\,0\,0\,0\.15\)\] { 
   box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
}
.dark  .shadow-\[2px_2px_0_0_rgba\(0\,0\,0\,0\.25\)\], .dark .shadow-\[4px_4px_0_0_rgba\(0\,0\,0\,0\.15\)\] {
   box-shadow: 0px 0px 4px 0px rgba(255,255,255,0.3);
}

#post-pending-banner button { color: var(--color-amber-50); }

#post-pending-banner button:nth-child(1) { background: linear-gradient(var(--color-green-500), color-mix(in hsl, var(--color-green-500) 80%, black 10%)); }
#post-pending-banner button:nth-child(1):hover { background: linear-gradient(color-mix(in hsl, var(--color-green-500) 80%, black 10%), var(--color-green-500)); }
#post-pending-banner button:nth-child(1):active { 
   background: linear-gradient(color-mix(in hsl, var(--color-green-500) 90%, white 10%), color-mix(in hsl, var(--color-green-500) 80%, black 10%));
   box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
}

#post-pending-banner button:nth-child(2) { background: linear-gradient(var(--color-red-500), color-mix(in hsl, var(--color-red-500) 80%, black 10%)); }
#post-pending-banner button:nth-child(2):hover { background: linear-gradient(color-mix(in hsl, var(--color-red-500) 80%, black 10%), var(--color-red-500)); }
#post-pending-banner button:nth-child(2):active { 
   background: linear-gradient(color-mix(in hsl, var(--color-red-500) 90%, white 10%), color-mix(in hsl, var(--color-red-500) 80%, black 10%));
   box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
}

.border-amber-400 { box-shadow: 0px 0px 6px var(--color-amber-400); }
.light .bg-amber-50 { background: linear-gradient(var(--color-amber-50), color-mix(in hsl, var(--color-amber-50) 90%, black 10%)); }
.dark  .bg-amber-50 { background: linear-gradient(color-mix(in hsl, black 30%, var(--color-amber-50) 60%), color-mix(in hsl, black 70%, var(--color-amber-50) 30%)); }
.dark  .text-black { color: var(--color-amber-50); }

.dark #user-info-bio-section .bbcode-quote-content { color: white; }
.light #user-info-bio-section .bbcode-quote-content { color: var(--color-card-foreground); }

.light code { color: black; }
.dark  code { color: white; }

button[role="switch"] {
   border-radius: 50px;
   span { border-radius: 50px; }
   .light span { box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.8); }
   .dark  span { box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8); }
}

#forum-thread-container div[style="mask-image: linear-gradient(black 50%, transparent 100%);"] {
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
}

#user-info-header {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

#post-media-container img, #activity-comment-post-thumb-container img, #media-container img, img[draggable="false"] { border-radius: 0px; }
#comment-body-container button[type="button"]:hover, #comment-body-container button[type="button"]:active { background: none; }

div.border, .bbcode-link-preview-card, #ui-dropdown-item:hover { border-radius: 10px; }

.light div.border, .light .bbcode-link-preview-card { box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5); }
.dark  div.border, .bbcode-link-preview-card { box-shadow: 0px 0px 4px 0px rgba(255,255,255,0.5); }

.light button[type="button"]:not(#tag-input-search-btn), .light #tag-input-container, .light header form, .light #user-info-stats-grid > a, .light img[src="/assets/static/nopfp.CL0ML5_G.png"] { box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5); }
.dark  button[type="button"]:not(#tag-input-search-btn), .dark #tag-input-container, .dark header form, .dark #user-info-stats-grid > a, .dark img[src="/assets/static/nopfp.CL0ML5_G.png"] { box-shadow: 0px 0px 4px 0px rgba(255,255,255,0.5); }

.light #forum-category-latest-title, .light .truncate { text-shadow: 0px 0px 4px rgba(0,0,0,0.2); }
.dark  #forum-category-latest-title, .dark .truncate { text-shadow: 0px 0px 4px rgba(255,255,255,0.2); }

.light .bbcode-quote { background: linear-gradient(color-mix(in hsl, white 95%, black 5%), color-mix(in hsl, white 80%, black 20%)); }
.dark  .bbcode-quote { background: linear-gradient(color-mix(in hsl, black 80%, white 20%), color-mix(in hsl, black 95%, white 5%)); }

.light header { background: linear-gradient(color-mix(in hsl, white 95%, black 5%), color-mix(in hsl, white 80%, black 20%)); }
.dark  header { background: linear-gradient(color-mix(in hsl, black 80%, white 20%), color-mix(in hsl, black 95%, white 5%)); }

.light .bg-card:not(header) { background: linear-gradient(white, color-mix(in hsl, white 90%, black 10%)); }
.dark  .bg-card:not(header) { background: linear-gradient(color-mix(in hsl, black 90%, white 10%), black); }

.light #ui-button:hover, .light #settings-avatar-remove-btn:hover, .light #landing-link-login button:hover, .light a[href="/auth/login"] button:hover, .light #user-profile-container > #ui-card button:hover { background: linear-gradient(color-mix(in hsl, white 80%, black 20%), color-mix(in hsl, white 95%, black 5%)); }
.dark  #ui-button:hover, .dark #settings-avatar-remove-btn:hover, .dark #landing-link-login button:hover, .dark a[href="/auth/login"] button:hover, .dark #user-profile-container > #ui-card button:hover { background: linear-gradient(color-mix(in hsl, black 95%, white 5%), color-mix(in hsl, black 80%, white 20%)); }

.light .bbcode-quote-link { box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5); }
.dark  .bbcode-quote-link { box-shadow: 0px 0px 4px 0px rgba(255,255,255,0.5); }

img:not(img[src="/assets/static/nopfp.CL0ML5_G.png"]), #user-featured-thread > div:nth-child(3) > div div, #user-featured-thread > div:nth-child(3) > div div > div > div button, .relative button, #sidebar-recent-comments a[href*="/post/view/"] div, #forum-thread-container button[type="button"], #comment-body-container button[type="button"], a.bbcode-attachment { box-shadow: none !important; }
.light img:not(img[src="/assets/static/nopfp.CL0ML5_G.png"]) { filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.5)); }
.dark img:not(img[src="/assets/static/nopfp.CL0ML5_G.png"]) { filter: drop-shadow(0px 0px 3px rgba(255,255,255,0.5)); }

.light #ui-button:active, .light #members-tabs > button:active {
   background: linear-gradient(color-mix(in hsl, white 90%, black 10%), white);
   box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
}

.dark #ui-button:active, .dark #members-tabs > button:active {
   background: linear-gradient(black, color-mix(in hsl, black 90%, white 10%));
   box-shadow: 0px 0px 4px 0px rgba(255,255,255,0.5);
}


img[class="bbcode-emote"] { filter: none; }

#search-active-filter {
   border: none;
   span, .text-xs { font-size: 20px; }
}

.light #search-active-filter { background: linear-gradient(white, color-mix(in hsl, white 80%, black 20%)); }
.dark  #search-active-filter { background: linear-gradient(color-mix(in hsl, black 80%, white 20%), black); }

@media (hover: hover) {
   .light .hover\:text-accent-foreground:hover {
      background: linear-gradient(color-mix(in hsl, white 90%, black 10%), white);
      color: black;
   }
   
   .dark .hover\:text-accent-foreground:hover {
      background: linear-gradient(black, color-mix(in hsl, black 90%, white 10%));
      color: white;
   }
}