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

:root {
  /* Typopgrahy */
  --font-sans: 'Jura', sans-serif;
  --font-serif: 'Manuale', serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Colors */
  --color-light: oklch(0.985 0 0);
  --color-dark: oklch(0.141 0.005 285.823);
  --color-primary: oklch(56.13% 0.2417 261.86);
  --color-primary-dark: oklch(0.89 0.17 173.24);
  --color-selection-text: var(--color-light);
  --color-skeleton-light: oklch(0.95 0.01 240);
  --color-skeleton-dark: oklch(0.3 0.01 240);

  /* Gradients */
  --color-gradient: linear-gradient(
    to bottom,
    oklch(0.57 0.22 30.71) 0%,
    oklch(0.31 0.17 297.28) 50%,
    oklch(0.34 0.12 257.28) 100%
  );

  /* Dynamic Colors */
  --color-dynamic: var(--color-dark);
  --color-dynamic-inverse: var(--color-light);

  /* Syntax Highlighting */
  --sh-class: oklch(0.62 0.18 39.22);
  --sh-identifier: oklch(0.39 0.01 248.05);
  --sh-sign: oklch(0.36 0.01 236.87);
  --sh-property: oklch(0.4 0.17 278.77);
  --sh-entity: oklch(0.53 0.2 292.87);
  --sh-jsxliterals: oklch(0.47 0.02 244.49);
  --sh-string: oklch(0.49 0 0);
  --sh-keyword: oklch(0.54 0.13 257.07);
  --sh-comment: oklch(0.58 0.11 152.52);
}

@layer base {
  ::selection {
    background-color: var(--color-primary);
    color: var(--color-selection-text);
  }
  html {
    font-family: var(--font-sans);
    scroll-behavior: smooth;
  }
  body {
    background-color: var(--color-light);
    .dark & {
      background-color: var(--color-dark);
      --color-dynamic: var(--color-light);
      --color-dynamic-inverse: var(--color-dark);
      --color-primary: var(--color-primary-dark);
      --color-selection-text: oklch(0.141 0.005 285.823);
      --color-gradient: linear-gradient(
        to bottom,
        oklch(0.58 0.29 314.11) 0%,
        oklch(0.35 0.17 267.13) 50%,
        oklch(0.63 0.12 223.89) 100%
      );
    }
  }
}

@layer components {
  .dark {
    .mdx-content {
      --sh-property: oklch(0.77 0.11 202.26);
      --sh-class: oklch(0.75 0.12 74.86);
      --sh-identifier: oklch(0.84 0.02 245.68);
      --sh-sign: oklch(0.66 0.02 243.97);
      --sh-property: oklch(0.81 0.12 174);
      --sh-entity: oklch(0.67 0.16 295.61);
      --sh-jsxliterals: oklch(0.84 0.02 245.68);
      --sh-string: oklch(0.7 0 301.39);
      --sh-keyword: oklch(0.67 0.21 311.15);
      --sh-comment: oklch(0.58 0.11 152.52);
    }
  }

  /* Add line highlighting styles */
  .line-highlight-enabled {
    .highlight-line {
      background-color: oklch(0.92 0.004 286.32);
      border-left: 2px solid var(--color-primary);
      padding-left: 24px;
      margin-left: -24px;
      margin-right: -24px;
    }
  }

  .dark .line-highlight-enabled {
    .highlight-line {
      background-color: oklch(0.274 0.006 286.033);
      border-left: 2px solid var(--color-primary);
    }
  }

  /* Safari line highlight horizontal scroll fix */
  pre > code {
    transform: translateZ(0);
    min-width: 100%;
    float: left;
  }

  pre > code > div {
    display: block;
  }

  /* MDX Styles */
  .note p {
    font-size: 0.875rem; /* text-sm */
    font-family: 'Jura', sans-serif;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  /* Custom class for pages that should hide scrollbars */
  .overflow-hidden {
    overflow: hidden !important;
    /* Optional: prevent content shift when scrollbars are hidden */
    padding-right: 0 !important;
  }
  /* Custom scrollbar styles for webkit browsers */
  .scrollbar {
    scrollbar-width: thin; /* For Firefox */
  }

  .scrollbar::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  .scrollbar::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: oklch(0.97 0.01 87.47);
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: oklch(0.86 0.02 17.62);
    border-radius: 100vh;
    border: 3px solid oklch(0.97 0.01 111.27);
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: oklch(0.74 0.05 333.72);
  }

  /* Loading Skeleton */
  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  .animate-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes fade-in-top {
    from {
      opacity: 0;
      transform: translateY(-40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-top {
    animation: fade-in 0.5s ease-out;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .animate-fade-in {
    animation: fade-in-no-slide 0.5s ease-out;
  }

  @keyframes fade-in-bottom {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-bottom {
    animation: fade-in-bottom 0.5s ease-out;
  }
}
