@import "tailwindcss";
@import "fumadocs-ui/css/black.css";
@import "fumadocs-ui/css/preset.css";

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

* {
  scrollbar-width: thin;
}

:root {
  --color-gray-950: hsla(190, 32%, 6%, 1);
  --color-gray-900: hsla(177, 19%, 17%, 1);
  --color-gray-800: hsla(175, 6%, 38%, 1);
  --color-gray-700: hsla(175, 6%, 53%, 1);
  --color-gray-600: hsla(175, 7%, 68%, 1);
  --color-gray-500: hsla(175, 9%, 79%, 1);
  --color-gray-400: hsla(175, 10%, 86%, 1);
  --color-gray-300: hsla(175, 12%, 92%, 1);
  --color-gray-200: hsla(175, 20%, 95%, 1);
  --color-gray-100: hsla(175, 23%, 97%, 1);
  --color-gray-50: hsla(175, 25%, 98%, 1);

  --color-primary-950: hsla(177, 91%, 8%, 1);
  --color-primary-900: hsla(173, 60%, 15%, 1);
  --color-primary-800: hsla(175, 64%, 21%, 1);
  --color-primary-700: hsla(173, 73%, 27%, 1);
  --color-primary-600: hsla(173, 78%, 34%, 1);
  --color-primary-500: hsla(172, 75%, 40%, 1);
  --color-primary-400: hsla(171, 61%, 50%, 1);
  --color-primary-300: hsla(169, 71%, 64%, 1);
  --color-primary-200: hsla(167, 78%, 78%, 1);
  --color-primary-100: hsla(166, 78%, 89%, 1);
  --color-primary-50: hsla(166, 76%, 97%, 1);

  --color-accent-950: hsla(202, 76%, 13%, 1);
  --color-accent-900: hsla(201, 57%, 21%, 1);
  --color-accent-800: hsla(199, 58%, 27%, 1);
  --color-accent-700: hsla(198, 70%, 31%, 1);
  --color-accent-600: hsla(197, 77%, 36%, 1);
  --color-accent-500: hsla(194, 80%, 43%, 1);
  --color-accent-400: hsla(193, 72%, 52%, 1);
  --color-accent-300: hsla(192, 77%, 69%, 1);
  --color-accent-200: hsla(191, 78%, 82%, 1);
  --color-accent-100: hsla(189, 80%, 90%, 1);
  --color-accent-50: hsla(184, 79%, 96%, 1);

  --color-error-950: hsla(343, 100%, 9%, 1);
  --color-error-900: hsla(342, 95%, 15%, 1);
  --color-error-800: hsla(342, 93%, 28%, 1);
  --color-error-700: hsla(344, 100%, 39%, 1);
  --color-error-600: hsla(345, 80%, 49%, 1);
  --color-error-500: hsla(345, 100%, 56%, 1);
  --color-error-400: hsla(352, 100%, 75%, 1);
  --color-error-300: hsla(352, 100%, 82%, 1);
  --color-error-200: hsla(352, 100%, 91%, 1);
  --color-error-100: hsla(356, 100%, 95%, 1);
  --color-error-50: hsla(356, 100%, 97%, 1);

  --color-success-950: hsla(145, 94%, 6%, 1);
  --color-success-900: hsla(145, 88%, 10%, 1);
  --color-success-800: hsla(145, 88%, 20%, 1);
  --color-success-700: hsla(144, 100%, 25%, 1);
  --color-success-600: hsla(144, 91%, 35%, 1);
  --color-success-500: hsla(144, 100%, 39%, 1);
  --color-success-400: hsla(144, 75%, 54%, 1);
  --color-success-300: hsla(143, 81%, 71%, 1);
  --color-success-200: hsla(143, 80%, 82%, 1);
  --color-success-100: hsla(142, 85%, 92%, 1);
  --color-success-50: hsla(141, 81%, 96%, 1);

  --color-warn-950: hsla(27, 100%, 7%, 1);
  --color-warn-900: hsla(27, 89%, 14%, 1);
  --color-warn-800: hsla(31, 98%, 25%, 1);
  --color-warn-700: hsla(34, 100%, 33%, 1);
  --color-warn-600: hsla(40, 100%, 43%, 1);
  --color-warn-500: hsla(44, 100%, 47%, 1);
  --color-warn-400: hsla(44, 98%, 62%, 1);
  --color-warn-300: hsla(51, 100%, 56%, 1);
  --color-warn-200: hsla(52, 93%, 77%, 1);
  --color-warn-100: hsla(55, 97%, 88%, 1);
  --color-warn-50: hsla(55, 100%, 95%, 1);
}

.dark {
  --color-gray-950: hsla(175, 25%, 98%, 1);
  --color-gray-900: hsla(175, 23%, 97%, 1);
  --color-gray-800: hsla(175, 20%, 95%, 1);
  --color-gray-700: hsla(175, 12%, 92%, 1);
  --color-gray-600: hsla(175, 10%, 86%, 1);
  --color-gray-500: hsla(175, 9%, 79%, 1);
  --color-gray-400: hsla(175, 7%, 68%, 1);
  --color-gray-300: hsla(175, 6%, 53%, 1);
  --color-gray-200: hsla(175, 6%, 38%, 1);
  --color-gray-100: hsla(177, 19%, 17%, 1);
  --color-gray-50: hsla(190, 32%, 6%, 1);

  --color-primary-950: hsla(166, 76%, 97%, 1);
  --color-primary-900: hsla(166, 78%, 89%, 1);
  --color-primary-800: hsla(167, 78%, 78%, 1);
  --color-primary-700: hsla(169, 71%, 64%, 1);
  --color-primary-600: hsla(171, 61%, 50%, 1);
  --color-primary-500: hsla(172, 75%, 40%, 1);
  --color-primary-400: hsla(173, 78%, 34%, 1);
  --color-primary-300: hsla(173, 73%, 27%, 1);
  --color-primary-200: hsla(175, 64%, 21%, 1);
  --color-primary-100: hsla(173, 60%, 15%, 1);
  --color-primary-50: hsla(177, 91%, 8%, 1);

  --color-accent-950: hsla(184, 79%, 96%, 1);
  --color-accent-900: hsla(189, 80%, 90%, 1);
  --color-accent-800: hsla(191, 78%, 82%, 1);
  --color-accent-700: hsla(192, 77%, 69%, 1);
  --color-accent-600: hsla(193, 72%, 52%, 1);
  --color-accent-500: hsla(194, 80%, 43%, 1);
  --color-accent-400: hsla(197, 77%, 36%, 1);
  --color-accent-300: hsla(198, 70%, 31%, 1);
  --color-accent-200: hsla(199, 58%, 27%, 1);
  --color-accent-100: hsla(201, 57%, 21%, 1);
  --color-accent-50: hsla(202, 76%, 13%, 1);

  --color-error-950: hsla(356, 100%, 97%, 1);
  --color-error-900: hsla(356, 100%, 95%, 1);
  --color-error-800: hsla(352, 100%, 91%, 1);
  --color-error-700: hsla(352, 100%, 82%, 1);
  --color-error-600: hsla(352, 100%, 75%, 1);
  --color-error-500: hsla(345, 100%, 56%, 1);
  --color-error-400: hsla(345, 80%, 49%, 1);
  --color-error-300: hsla(344, 100%, 39%, 1);
  --color-error-200: hsla(342, 93%, 28%, 1);
  --color-error-100: hsla(342, 95%, 15%, 1);
  --color-error-50: hsla(343, 100%, 9%, 1);

  --color-success-950: hsla(141, 81%, 96%, 1);
  --color-success-900: hsla(142, 85%, 92%, 1);
  --color-success-800: hsla(143, 80%, 82%, 1);
  --color-success-700: hsla(143, 81%, 71%, 1);
  --color-success-600: hsla(144, 75%, 54%, 1);
  --color-success-500: hsla(144, 100%, 39%, 1);
  --color-success-400: hsla(144, 91%, 35%, 1);
  --color-success-300: hsla(144, 100%, 25%, 1);
  --color-success-200: hsla(145, 88%, 20%, 1);
  --color-success-100: hsla(145, 88%, 10%, 1);
  --color-success-50: hsla(145, 94%, 6%, 1);

  --color-warn-950: hsla(55, 100%, 95%, 1);
  --color-warn-900: hsla(55, 97%, 88%, 1);
  --color-warn-800: hsla(52, 93%, 77%, 1);
  --color-warn-700: hsla(51, 100%, 56%, 1);
  --color-warn-600: hsla(44, 98%, 62%, 1);
  --color-warn-500: hsla(44, 100%, 47%, 1);
  --color-warn-400: hsla(40, 100%, 43%, 1);
  --color-warn-300: hsla(34, 100%, 33%, 1);
  --color-warn-200: hsla(31, 98%, 25%, 1);
  --color-warn-100: hsla(27, 89%, 14%, 1);
  --color-warn-50: hsla(27, 100%, 7%, 1);
}

@theme {
  --color-ln-gray-00: var(--lng1771-gray-00);
  --color-ln-gray-02: var(--lng1771-gray-02);
  --color-ln-gray-05: var(--lng1771-gray-05);
  --color-ln-gray-10: var(--lng1771-gray-10);
  --color-ln-gray-20: var(--lng1771-gray-20);
  --color-ln-gray-30: var(--lng1771-gray-30);
  --color-ln-gray-40: var(--lng1771-gray-40);
  --color-ln-gray-50: var(--lng1771-gray-50);
  --color-ln-gray-60: var(--lng1771-gray-60);
  --color-ln-gray-70: var(--lng1771-gray-70);
  --color-ln-gray-80: var(--lng1771-gray-80);
  --color-ln-gray-90: var(--lng1771-gray-90);
  --color-ln-gray-100: var(--lng1771-gray-100);

  --color-ln-primary-05: var(--lng1771-primary-05);
  --color-ln-primary-10: var(--lng1771-primary-10);
  --color-ln-primary-30: var(--lng1771-primary-30);
  --color-ln-primary-50: var(--lng1771-primary-50);
  --color-ln-primary-70: var(--lng1771-primary-70);
  --color-ln-primary-90: var(--lng1771-primary-90);
  --color-ln-focus-outline: var(--lng1771-focus-outline);

  --color-ln-pill-plain-fill: var(--lng1771-pill-plain-fill);
  --color-ln-pill-column-fill: var(--lng1771-pill-column-fill);
  --color-ln-pill-column-stroke: var(--lng1771-pill-column-stroke);
  --color-ln-pill-pivot-fill: var(--lng1771-pill-pivot-fill);
  --color-ln-pill-pivot-stroke: var(--lng1771-pill-pivot-stroke);
  --color-ln-pill-group-fill: var(--lng1771-pill-group-fill);
  --color-ln-pill-group-stroke: var(--lng1771-pill-group-stroke);
  --color-ln-pill-icon-color: var(--lng1771-pill-icon-color);

  --animate-popover-in: popover-in 130ms ease;
  --animate-popover-out: popover-out 130ms ease;

  --color-gray-950: var(--color-gray-950);
  --color-gray-900: var(--color-gray-900);
  --color-gray-800: var(--color-gray-800);
  --color-gray-700: var(--color-gray-700);
  --color-gray-600: var(--color-gray-600);
  --color-gray-500: var(--color-gray-500);
  --color-gray-400: var(--color-gray-400);
  --color-gray-300: var(--color-gray-300);
  --color-gray-200: var(--color-gray-200);
  --color-gray-100: var(--color-gray-100);
  --color-gray-50: var(--color-gray-50);

  --color-primary-950: var(--color-primary-950);
  --color-primary-900: var(--color-primary-900);
  --color-primary-800: var(--color-primary-800);
  --color-primary-700: var(--color-primary-700);
  --color-primary-600: var(--color-primary-600);
  --color-primary-500: var(--color-primary-500);
  --color-primary-400: var(--color-primary-400);
  --color-primary-300: var(--color-primary-300);
  --color-primary-200: var(--color-primary-200);
  --color-primary-100: var(--color-primary-100);
  --color-primary-50: var(--color-primary-50);

  --color-accent-950: var(--color-accent-950);
  --color-accent-900: var(--color-accent-900);
  --color-accent-800: var(--color-accent-800);
  --color-accent-700: var(--color-accent-700);
  --color-accent-600: var(--color-accent-600);
  --color-accent-500: var(--color-accent-500);
  --color-accent-400: var(--color-accent-400);
  --color-accent-300: var(--color-accent-300);
  --color-accent-200: var(--color-accent-200);
  --color-accent-100: var(--color-accent-100);
  --color-accent-50: var(--color-accent-50);

  --color-error-950: var(--color-error-950);
  --color-error-900: var(--color-error-900);
  --color-error-800: var(--color-error-800);
  --color-error-700: var(--color-error-700);
  --color-error-600: var(--color-error-600);
  --color-error-500: var(--color-error-500);
  --color-error-400: var(--color-error-400);
  --color-error-300: var(--color-error-300);
  --color-error-200: var(--color-error-200);
  --color-error-100: var(--color-error-100);
  --color-error-50: var(--color-error-50);

  --color-success-950: var(--color-success-950);
  --color-success-900: var(--color-success-900);
  --color-success-800: var(--color-success-800);
  --color-success-700: var(--color-success-700);
  --color-success-600: var(--color-success-600);
  --color-success-500: var(--color-success-500);
  --color-success-400: var(--color-success-400);
  --color-success-300: var(--color-success-300);
  --color-success-200: var(--color-success-200);
  --color-success-100: var(--color-success-100);
  --color-success-50: var(--color-success-50);

  --color-warn-950: var(--color-warn-950);
  --color-warn-900: var(--color-warn-900);
  --color-warn-800: var(--color-warn-800);
  --color-warn-700: var(--color-warn-700);
  --color-warn-600: var(--color-warn-600);
  --color-warn-500: var(--color-warn-500);
  --color-warn-400: var(--color-warn-400);
  --color-warn-300: var(--color-warn-300);
  --color-warn-200: var(--color-warn-200);
  --color-warn-100: var(--color-warn-100);
  --color-warn-50: var(--color-warn-50);
}

@layer base {
  :root {
    --ch-0: light;
    --ch-1: #6e7781;
    --ch-2: #0550ae;
    --ch-3: #953800;
    --ch-4: #24292f;
    --ch-5: #8250df;
    --ch-6: #116329;
    --ch-7: #cf222e;
    --ch-8: #0a3069;
    --ch-9: #82071e;
    --ch-10: #f6f8fa;
    --ch-11: #ffebe9;
    --ch-12: #dafbe1;
    --ch-13: #ffd8b5;
    --ch-14: #eaeef2;
    --ch-15: #57606a;
    --ch-16: #ffffff;
    --ch-17: #eaeef280;
    --ch-18: #fdff0033;
    --ch-19: #1a85ff;
    --ch-20: #add6ff;
    --ch-21: #0969da;
    --ch-22: #f6f8fa;
    --ch-23: #d0d7de;
    --ch-24: #8c959f;
    --ch-25: #afb8c133;
    --ch-26: #ffffffe6;
  }
  .dark {
    --ch-0: dark;
    --ch-1: #8b949e;
    --ch-2: #79c0ff;
    --ch-3: #ffa657;
    --ch-4: #c9d1d9;
    --ch-5: #d2a8ff;
    --ch-6: #7ee787;
    --ch-7: #ff7b72;
    --ch-8: #a5d6ff;
    --ch-9: #ffa198;
    --ch-10: #f0f6fc;
    --ch-11: #490202;
    --ch-12: #04260f;
    --ch-13: #5a1e02;
    --ch-14: #161b22;
    --ch-15: #8b949e;
    --ch-16: #0d1117;
    --ch-17: #6e76811a;
    --ch-18: #ffffff0b;
    --ch-19: #3794ff;
    --ch-20: #264f78;
    --ch-21: #1f6feb;
    --ch-22: #010409;
    --ch-23: #30363d;
    --ch-24: #6e7681;
    --ch-25: #6e768166;
    --ch-26: #0d1117e6;
  }
}

h2 {
  .type-tag::after {
    position: relative;
    top: -2px;
    display: inline-block;
    content: var(--type-content);
    margin-left: 8px;
    @apply bg-accent-300/20 border-accent-500/60 w-fit rounded border px-1 py-0.5 text-xs;
  }
}

@theme {
  --color-fd-background: white;
  --color-fd-foreground: black;
  --color-fd-muted: hsl(0, 0%, 96.1%);
  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
  --color-fd-popover: hsl(0, 0%, 98%);
  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
  --color-fd-card: hsl(0, 0%, 98.7%);
  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
  --color-fd-border: hsla(0, 0%, 80%, 50%);
  --color-fd-primary: hsl(0, 0%, 9%);
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
  --color-fd-secondary: hsl(0, 0%, 93.1%);
  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
  --color-fd-accent: hsla(0, 0%, 82%, 50%);
  --color-fd-accent-foreground: hsl(0, 0%, 9%);
  --color-fd-ring: hsl(0, 0%, 63.9%);
}

.prose ul,
.prose p {
  font-size: 14px;
}

.prose h3 {
  font-size: 17px;
}
.prose em {
  @apply italic;
}

.dark {
  --color-fd-background: hsl(0, 0%, 7.04%);
  --color-fd-foreground: hsl(0, 0%, 92%);
  --color-fd-muted: hsl(0, 0%, 12.9%);
  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
  --color-fd-popover: hsl(0, 0%, 11.6%);
  --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
  --color-fd-card: hsl(0, 0%, 9.8%);
  --color-fd-card-foreground: hsl(0, 0%, 98%);
  --color-fd-border: hsla(0, 0%, 40%, 20%);
  --color-fd-primary: hsl(0, 0%, 98%);
  --color-fd-primary-foreground: hsl(0, 0%, 9%);
  --color-fd-secondary: hsl(0, 0%, 12.9%);
  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
  --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
  --color-fd-accent-foreground: hsl(0, 0%, 90%);
  --color-fd-ring: hsl(0, 0%, 54.9%);
}

.dark .prose {
  --tw-prose-body: #9ca3af;
}

.dark a {
  text-decoration-color: var(--color-primary-600);
  --tw-prose-links: var(--color-primary-600);
}
a {
  --tw-prose-links: var(--color-accent-500);
  text-decoration-color: var(--color-accent-500);
  text-decoration-thickness: 1px;
  font-weight: 600;
}

#nd-page article div + h1 + p {
  font-size: 16px;
  margin-bottom: 0px;
}

strong {
  font-weight: 600;
}

.button-hider {
  & > div[role="tablist"] {
    button {
      opacity: 0;
      pointer-events: none;
      cursor: not-allowed;
    }
  }
}

#nd-toc a:hover {
  @apply text-fd-primary transition-colors;
}

@keyframes popover-in {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}

@keyframes popover-out {
  to {
    opacity: 0;
    transform: scale(0.7);
  }
}
