@import 'tailwindcss';

@plugin "tailwindcss-animate";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(100% 0 0);
  --foreground: oklch(24.37% 0.0877 271.06);
  --heading-foreground: oklch(27.68% 0.1059 270.48);
  --primary: oklch(58.76% 0.309 262.51);
  --primary-foreground: oklch(98% 0 0);
  --secondary: oklch(98.17% 0.0057 264.53);
  --muted-foreground: oklch(61.85% 0.0673 266.47);
  --accent: oklch(98.17% 0.0057 264.53);
  --accent-foreground: oklch(30.31% 0 0);
  --destructive: oklch(64.37% 0.257 29.23);
  --border: oklch(92.19% 0 0);
  --input: oklch(92.19% 0 0);
  --ring: oklch(58.76% 0.309 262.51);
}

.dark {
  --background: oklch(18.39% 0.0025 247.95);
  --foreground: oklch(90.03% 0.0187 261.33);
  --heading-foreground: oklch(100% 0 0);
  --primary: oklch(71.3% 0.1595 38.31);
  --primary-foreground: oklch(10% 0.002 262);
  --secondary: oklch(28.39% 0.0025 247.95);
  --muted-foreground: oklch(90.03% 0.0187 261.33);
  --accent: oklch(28.39% 0.0025 247.95);
  --accent-foreground: oklch(98% 0 0);
  --destructive: oklch(30.6% 0.174 27);
  --border: oklch(30.13% 0.0056 271.23);
  --input: oklch(30.13% 0.0056 271.23);
  --ring: oklch(83.9% 0.01 262);
}

@utility container {
  padding-inline: 10px;
  margin-inline: auto;

  @variant mobile {
    padding-inline: 20px;
  }

  @variant tablet {
    padding-inline: 80px;
  }

  @variant desktop {
    padding-inline: 80px;
  }

  @variant wide {
    padding-inline: 120px;
  }
}

@theme inline {
  --font-*: initial;
  --font-roboto: var(--font-roboto);
  --font-yekan: var(--font-yekan);

  --breakpoint-*: initial;
  --breakpoint-mobile: 560px;
  --breakpoint-tablet: 760px;
  --breakpoint-desktop: 960px;
  --breakpoint-wide: 1370px;

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

@layer base {
  body {
    @apply bg-background text-foreground;
  }
  strong {
    @apply text-primary;
  }
  h1 {
    @apply text-2xl tablet:text-3xl font-black pb-4;
  }
  p {
    @apply text-justify;
  }
  h4 {
    @apply text-lg tablet:text-xl pt-10 font-bold pb-2;
  }
  .table_docs td,
  .table_docs th {
    @apply px-4 py-3 whitespace-nowrap;
  }
  .table_docs tr {
    @apply even:bg-gray-700/20 odd:bg-gray-700/30 hover:bg-gray-700/60;
  }
}

* {
  scrollbar-color: var(--primary) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 2px;
  height: 4px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary);
}

::selection {
  background: var(--primary);
  color: var(--foreground);
}

.shiki {
  @apply rounded-md py-9 px-6 overflow-auto;
}
