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

@layer utilities {
  /* Custom transitions */
  .transition-hover {
    transition: all 0.2s ease;
  }

  /* Card shadow utilities */
  .card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .card-shadow-hover:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
  }

  /* Subtle background gradients */
  .bg-gradient-subtle {
    background-image: linear-gradient(to right, #f5f5f5, #fafafa);
  }

  /* Custom border styles */
  .border-subtle {
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
}

@layer base {
  /* Local font declarations */
  @font-face {
    font-family: 'Inter';
    src: url("/assets/inter-variable-1f021a24.woff2") format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'JetBrains Mono';
    src: url("/assets/jetbrains-mono-variable-7c88d0cc.woff2") format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  /* Custom form styling enhancements */
  input:focus, select:focus, textarea:focus {
    outline: 2px solid rgba(79, 70, 229, 0.2) !important;
    outline-offset: 2px !important;
  }

  /* Custom color theme for the new design */
  :root {
    --color-terminal-green: rgb(0, 214, 160);
    --color-jet-black: rgb(18, 18, 18);
    --color-dark-gray: rgb(41, 41, 41);
    --color-medium-gray: rgb(58, 58, 58);
    --color-soft-gray: rgb(242, 242, 242);
    --color-darker-gray: rgb(30, 30, 30);
  }

  /* Dark mode utilities */
  .dark {
    --foreground-rgb: 242, 242, 242;
    --background-start-rgb: 18, 18, 18;
    --background-end-rgb: 18, 18, 18;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  }

  :is(.dark *)::-webkit-scrollbar-track {
    --tw-bg-opacity: 1;
    background-color: rgb(30 30 30 / var(--tw-bg-opacity, 1));
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
  }

  :is(.dark *)::-webkit-scrollbar-thumb {
    --tw-bg-opacity: 1;
    background-color: rgb(58 58 58 / var(--tw-bg-opacity, 1));
  }

  ::-webkit-scrollbar-thumb:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
  }

  :is(.dark *)::-webkit-scrollbar-thumb:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(90 90 90 / var(--tw-bg-opacity, 1));
  }

  /* Font overrides */
  body {
    font-family: Inter, system-ui, -apple-system, sans-serif;
  }

  .font-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }

  code, kbd, samp, pre {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  }
}