: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%);
}

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

#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; }

#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, input, form { border-radius: 10px; }
#tag-input-container, form { border-radius: 50px; }

button, #ui-button, code, .bbcode-quote-link, img, #edit-tags-menu-content #tag-input-container, blockquote, textarea { border-radius: 5px; }

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

.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: 5px;
   border-bottom-left-radius: 5px;
}

#post-media-container img, #activity-comment-post-thumb-container img, #media-container img, img[draggable="false"] { border-radius: 0px; }

#ui-card-content button[type="button"]:hover, #post-comments-section button[type="button"]:hover { background: linear-gradient(var(--color-accent), color-mix(in hsl, var(--color-accent) 80%, black 20%)); }
#ui-card-content button[type="button"]:active, #post-comments-section button[type="button"]:active { background: linear-gradient(color-mix(in hsl, var(--color-accent) 80%, black 20%), var(--color-accent)); }

#forum-thread-container button[type="button"], #comment-body-container button[type="button"] { box-shadow: none; }
#comment-body-container button[type="button"]:hover, #comment-body-container button[type="button"]:active { background: none; }

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

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

.light button[type="button"]:not(#tag-input-search-btn), #tag-input-container, #user-info-stats-grid > a, img[alt="User avatar"] { box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5); }
.dark  button[type="button"]:not(#tag-input-search-btn), #tag-input-container, #user-info-stats-grid > a, img[alt="User avatar"] { box-shadow: 0px 0px 4px 0px rgba(255,255,255,0.5); }

.light #forum-category-latest-title, .truncate { text-shadow: 0px 0px 4px rgba(0,0,0,0.2); }
.dark  #forum-category-latest-title, .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 95%, white 5%), color-mix(in hsl, black 80%, white 20%)); }

.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 95%, white 5%), color-mix(in hsl, black 80%, white 20%)); }

.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(black, color-mix(in hsl, black 90%, white 10%)); }

.light #ui-button:hover, #settings-avatar-remove-btn:hover { background: linear-gradient(color-mix(in hsl, white 80%, black 20%), color-mix(in hsl, white 95%, black 5%)); }
.dark  #ui-button:hover, #settings-avatar-remove-btn:hover { background: linear-gradient(color-mix(in hsl, black 80%, white 20%), color-mix(in hsl, black 95%, white 5%)); }

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

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

img:not(img[src="/assets/static/nopfp.CL0ML5_G.png"]) {
   filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.5));
   box-shadow: none;
}

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

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

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

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

@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(color-mix(in hsl, black 90%, white 10%), black);
        color: white;
    }
}