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

/* webklar Design System - Muradov Inspired Minimal Dark Theme */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");

@layer base {
  :root {
    /* Ultra Minimal Deep Black Theme - Muradov Inspired */
    --background: 0 0% 0%;
    --foreground: 0 0% 92%;

    --card: 0 0% 6%;
    --card-foreground: 0 0% 92%;

    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 92%;

    /* Primary - Subtle cyan accent */
    --primary: 180 40% 50%;
    --primary-foreground: 0 0% 3%;

    /* Secondary - Dark Gray */
    --secondary: 0 0% 12%;
    --secondary-foreground: 0 0% 92%;

    /* Muted - Medium Gray */
    --muted: 0 0% 45%;
    --muted-foreground: 0 0% 65%;

    /* Accent */
    --accent: 0 0% 10%;
    --accent-foreground: 0 0% 92%;

    --destructive: 0 62% 50%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 15%;
    --input: 0 0% 15%;
    --ring: 180 40% 50%;

    --radius: 0.5rem;

    /* Shadows */
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);

    --sidebar-background: 0 0% 3%;
    --sidebar-foreground: 222 47% 11%;
    --sidebar-primary: 200 98% 39%;
    --sidebar-primary-foreground: 204 100% 97%;
    --sidebar-accent: 215 24% 26%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 212 26% 83%;
    --sidebar-ring: 200 98% 39%;
    --chart-1: 198 93% 59%;
    --chart-2: 213 93% 67%;
    --chart-3: 215 20% 65%;
    --chart-4: 215 16% 46%;
    --chart-5: 215 19% 34%;
    --sidebar: 210 40% 98%;
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --spacing: 0.25rem;
    --font-serif: 'Lora', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    --tracking-normal: 0em;
  }

  .dark {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    --card: 217 32% 17%;
    --card-foreground: 210 40% 98%;
    --popover: 215 24% 26%;
    --popover-foreground: 210 40% 98%;
    --primary: 198 93% 59%;
    --primary-foreground: 204 80% 15%;
    --secondary: 212 26% 83%;
    --secondary-foreground: 228 84% 4%;
    --muted: 215 16% 46%;
    --muted-foreground: 210 40% 98%;
    --accent: 228 84% 4%;
    --accent-foreground: 215 20% 65%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 85% 97%;
    --border: 215 19% 34%;
    --input: 215 19% 34%;
    --ring: 198 93% 59%;
    --chart-1: 199 95% 73%;
    --chart-2: 211 96% 78%;
    --chart-3: 215 20% 65%;
    --chart-4: 215 16% 46%;
    --chart-5: 215 19% 34%;
    --sidebar: 217 32% 17%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: 198 93% 59%;
    --sidebar-primary-foreground: 204 80% 15%;
    --sidebar-accent: 215 20% 65%;
    --sidebar-accent-foreground: 228 84% 4%;
    --sidebar-border: 215 19% 34%;
    --sidebar-ring: 198 93% 59%;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    --radius: 0rem;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: -0.01em;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.04em;
    font-weight: 500;
  }

  h1 {
    font-weight: 500;
    letter-spacing: -0.05em;
  }
}

@layer components {
  /* Minimal glass nav */
  .glass-nav {
    @apply backdrop-blur-xl border-b;
    background: hsl(0 0% 3% / 0.9);
    border-color: hsl(0 0% 15% / 0.5);
  }

  /* Card minimal */
  .card-minimal {
    @apply transition-all duration-500;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
  }
  .card-minimal:hover {
    border-color: hsl(0 0% 25%);
  }

  /* Text gradient - subtle */
  .text-gradient {
    background: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(0 0% 70%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Animated underline for links */
  .link-underline {
    @apply relative;
  }
  .link-underline::after {
    content: '';
    @apply absolute bottom-0 left-0 w-full h-px scale-x-0 origin-right transition-transform duration-300;
    background: hsl(0 0% 98%);
  }
  .link-underline:hover::after {
    @apply scale-x-100 origin-left;
  }

  /* Fade up on scroll */
  .fade-up {
    @apply opacity-0 translate-y-8 transition-all duration-700 ease-out;
  }
  .fade-up.visible {
    @apply opacity-100 translate-y-0;
  }

  /* Partner logo marquee */
  .marquee {
    @apply flex gap-16;
    animation: marquee 30s linear infinite;
  }

  /* Minimal project card */
  .project-card {
    @apply transition-all duration-500 overflow-hidden;
    background: hsl(0 0% 6%);
    border: 1px solid hsl(0 0% 12%);
  }
  .project-card:hover {
    border-color: hsl(0 0% 25%);
    transform: translateY(-4px);
  }

  /* Minimal button */
  .btn-minimal {
    @apply relative transition-all duration-300;
    background: hsl(0 0% 98%);
    color: hsl(0 0% 3%);
  }
  .btn-minimal:hover {
    background: hsl(0 0% 85%);
  }

  /* Outline button */
  .btn-outline {
    @apply relative transition-all duration-300 border;
    background: transparent;
    color: hsl(0 0% 98%);
    border-color: hsl(0 0% 25%);
  }
  .btn-outline:hover {
    border-color: hsl(0 0% 50%);
    background: hsl(0 0% 10%);
  }

  /* Stats number */
  .stat-number {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1;
  }

  /* Grid line decoration */
  .grid-lines {
    background-image: 
      linear-gradient(hsl(0 0% 12%) 1px, transparent 1px),
      linear-gradient(90deg, hsl(0 0% 12%) 1px, transparent 1px);
    background-size: 80px 80px;
  }

  /* Horizontal divider */
  .divider {
    @apply w-full h-px;
    background: linear-gradient(90deg, transparent 0%, hsl(0 0% 20%) 50%, transparent 100%);
  }

  /* Label/Tag */
  .label-tag {
    @apply text-xs uppercase tracking-widest font-medium;
    color: hsl(0 0% 50%);
  }
}

@layer utilities {
  .shadow-soft {
    box-shadow: var(--shadow-sm);
  }
  .shadow-elevated {
    box-shadow: var(--shadow-md);
  }
  .shadow-floating {
    box-shadow: var(--shadow-lg);
  }
}

/* Keyframes */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

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

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

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out forwards;
}

.animate-slide-up {
  animation: slide-up 0.8s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}