damaj.tech/src/index.css

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

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

@layer base {
  :root {
    --background: 220 15% 10%;
    --foreground: 30 10% 90%;

    --card: 220 12% 14%;
    --card-foreground: 30 10% 90%;

    --popover: 220 12% 14%;
    --popover-foreground: 30 10% 90%;

    --primary: 25 95% 55%;
    --primary-foreground: 220 15% 8%;

    --secondary: 220 12% 18%;
    --secondary-foreground: 30 10% 85%;

    --muted: 220 10% 20%;
    --muted-foreground: 220 8% 55%;

    --accent: 25 90% 50%;
    --accent-foreground: 220 15% 8%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 220 10% 22%;
    --input: 220 10% 22%;
    --ring: 25 95% 55%;

    --radius: 1rem;

    --glass-bg: 220 12% 16%;
    --glass-border: 220 10% 28%;
    --glass-shine: 25 95% 55%;

    --sidebar-background: 220 15% 10%;
    --sidebar-foreground: 30 10% 90%;
    --sidebar-primary: 25 95% 55%;
    --sidebar-primary-foreground: 220 15% 8%;
    --sidebar-accent: 220 12% 18%;
    --sidebar-accent-foreground: 30 10% 90%;
    --sidebar-border: 220 10% 22%;
    --sidebar-ring: 25 95% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-body antialiased;
  }
}

@layer components {
  .glass-card {
    background: hsl(var(--glass-bg) / 0.6);
    border: 1px solid hsl(var(--glass-border) / 0.4);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    box-shadow:
      inset 0 1px 1px hsl(0 0% 100% / 0.05),
      inset 0 -1px 1px hsl(0 0% 0% / 0.1),
      0 8px 32px hsl(0 0% 0% / 0.3),
      0 2px 8px hsl(0 0% 0% / 0.2);
    position: relative;
    overflow: hidden;
  }

  .glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      hsl(0 0% 100% / 0.08) 0%,
      transparent 40%,
      transparent 60%,
      hsl(0 0% 100% / 0.03) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  .glass-card-hover {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
      box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1),
      border-color 0.3s ease;
  }

  .glass-card-hover:hover {
    transform: translateY(-2px);
    border-color: hsl(var(--glass-shine) / 0.3);
    box-shadow:
      inset 0 1px 1px hsl(0 0% 100% / 0.08),
      0 12px 40px hsl(0 0% 0% / 0.4),
      0 4px 12px hsl(var(--primary) / 0.1);
  }

  .mouse-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      hsl(var(--primary) / 0.12) 0%,
      transparent 70%
    );
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 0;
    transition: opacity 0.3s ease;
  }

  .link-arrow {
    @apply inline-block transition-transform duration-200;
  }

  .link-arrow-parent:hover .link-arrow {
    transform: translate(3px, -3px);
  }
}

@layer utilities {
  .text-gradient {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(30 100% 65%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

@layer components {
  .prose-blog {
    @apply text-foreground/90 leading-relaxed;
  }
  .prose-blog > * + * { @apply mt-4; }
  .prose-blog h1 { @apply text-2xl md:text-3xl font-heading font-bold text-foreground mt-10 mb-3; }
  .prose-blog h2 { @apply text-xl md:text-2xl font-heading font-bold text-foreground mt-8 mb-2; }
  .prose-blog h3 { @apply text-lg font-heading font-semibold text-foreground mt-6 mb-2; }
  .prose-blog p { @apply text-foreground/85 leading-relaxed; }
  .prose-blog a { @apply text-primary underline underline-offset-4 decoration-primary/40 hover:decoration-primary transition-colors; }
  .prose-blog strong { @apply text-foreground font-semibold; }
  .prose-blog em { @apply italic; }
  .prose-blog ul { @apply list-disc pl-6 space-y-1.5 text-foreground/85; }
  .prose-blog ol { @apply list-decimal pl-6 space-y-1.5 text-foreground/85; }
  .prose-blog blockquote { @apply border-l-2 border-primary/60 pl-4 italic text-muted-foreground my-6; }
  .prose-blog code:not(pre code) {
    @apply font-mono text-[0.9em] px-1.5 py-0.5 rounded bg-secondary/60 border border-border text-primary;
  }
  .prose-blog pre {
    @apply font-mono text-sm p-4 rounded-lg overflow-x-auto my-6 border border-border;
    background: hsl(var(--glass-bg) / 0.8);
  }
  .prose-blog pre code { @apply bg-transparent p-0 border-0; }
  .prose-blog img { @apply rounded-lg my-6 border border-border; }
  .prose-blog hr { @apply border-border my-8; }
  .prose-blog table { @apply w-full border-collapse my-6 text-sm; }
  .prose-blog th, .prose-blog td { @apply border border-border px-3 py-2 text-left; }
  .prose-blog th { @apply bg-secondary/40 font-semibold; }
}