@import "@fontsource-variable/noto-sans-jp";

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

@layer base
{
  :root
  {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 210 40% 98%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --theme-link: 221.2 83.2% 53.3%;
    --top-nav-root-bg-mobile: #fef08a;
    --top-nav-root-bg-desktop: #fefce8;
    --top-nav-active-bg: #fef08a;
    --top-nav-submenu-bg: #fef08a;
    --top-nav-mobile-menu-bg: #fef08a;
    --top-nav-mobile-active-bg: #fefce8;
    --top-nav-brand-link: #db2777;
    --top-nav-menu-link: #1d4ed8;

    --tag-colour-deerjikist: #9f1239;
    --tag-colour-deerjikist-hover: #b62a51;
    --tag-colour-meme: #6b21a8;
    --tag-colour-meme-hover: #8238bf;
    --tag-colour-character: #4d7c0f;
    --tag-colour-character-hover: #649326;
    --tag-colour-general: #155e75;
    --tag-colour-general-hover: #2c758c;
    --tag-colour-material: #c2410c;
    --tag-colour-material-hover: #d95823;
    --tag-colour-meta: #a16207;
    --tag-colour-meta-hover: #b8791e;
    --tag-colour-nico: #4b5563;
    --tag-colour-nico-hover: #626c7a;
  }

  .dark
  {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 62.8% 45%;
    --destructive-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --top-nav-root-bg-mobile: #230505;
    --top-nav-root-bg-desktop: #230505;
    --top-nav-active-bg: #450a0a;
    --top-nav-submenu-bg: #450a0a;
    --top-nav-mobile-menu-bg: #230505;
    --top-nav-mobile-active-bg: #450a0a;
    --top-nav-brand-link: #f9a8d4;
    --top-nav-menu-link: #93c5fd;
  }

  body
  {
    @apply overflow-x-clip bg-background text-foreground;
  }

  a
  {
    color: hsl(var(--theme-link));
  }
  a:hover
  {
    color: color-mix(in oklab, hsl(var(--theme-link)), white 18%);
  }
}

:root
{
  font-family: "Noto Sans JP Variable", system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root[data-animation='reduced'] *,
:root[data-animation='off'] *
{
  scroll-behavior: auto !important;
}

:root[data-animation='off'] *,
:root[data-animation='off'] *::before,
:root[data-animation='off'] *::after
{
  animation-duration: 0ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}

a
{
  font-weight: 500;
  text-decoration: inherit;
}

body
{
  margin: 0;
  min-width: 320px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

#root
{
  min-height: 100dvh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

@keyframes wiki-blink
{
  0%, 100% { color: #dc2626; }
  50% { color: #2563eb; }
}

@keyframes wiki-blink-dark
{
  0%, 100% { color: #f87171; }
  50% { color: #60a5fa; }
}

.tag-marquee
{
  position: relative;
}

.tag-link-colour
{
  color: var(--tag-link-colour);
}

.tag-link-hover-colour:hover
{
  color: var(--tag-link-hover-colour) !important;
}

.top-nav-root
{
  background: var(--top-nav-root-bg-mobile);
}

@media (min-width: 768px)
{
  .top-nav-root
  {
    background: var(--top-nav-root-bg-desktop);
  }
}

.top-nav-brand-link,
.top-nav-mobile-toggle
{
  color: var(--top-nav-brand-link);
}

.top-nav-brand-link:hover,
.top-nav-mobile-toggle:hover
{
  color: color-mix(in oklab, var(--top-nav-brand-link), white 18%);
}

.top-nav-menu-link,
.top-nav-mobile-row
{
  color: var(--top-nav-menu-link);
}

.top-nav-menu-link:hover,
.top-nav-mobile-row:hover
{
  color: color-mix(in oklab, var(--top-nav-menu-link), white 18%);
}

.top-nav-highlight
{
  background: var(--top-nav-active-bg);
}

.top-nav-submenu
{
  background: var(--top-nav-submenu-bg);
}

.top-nav-mobile-menu .top-nav-submenu
{
  background: var(--top-nav-mobile-active-bg);
}

.top-nav-mobile-menu
{
  background: var(--top-nav-mobile-menu-bg);
}

.top-nav-mobile-active
{
  background: var(--top-nav-mobile-active-bg);
}

.tag-marquee__animated
{
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 100%;
  width: max-content;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform;
}