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

@layer base {
  :root {
    --background: 0 0% 99%;
    --foreground: 240 10% 4%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 4%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 4%;
    --primary: 240 6% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 5% 96%;
    --secondary-foreground: 240 6% 10%;
    --muted: 240 5% 96%;
    --muted-foreground: 240 4% 46%;
    --accent: 217 92% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 6% 90%;
    --input: 240 6% 90%;
    --ring: 217 92% 60%;
    --radius: 0.625rem;
  }

  .dark {
    --background: 240 10% 4%;
    --foreground: 0 0% 95%;
    --card: 240 6% 7%;
    --card-foreground: 0 0% 95%;
    --popover: 240 6% 7%;
    --popover-foreground: 0 0% 95%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 6% 10%;
    --secondary: 240 4% 14%;
    --secondary-foreground: 0 0% 95%;
    --muted: 240 4% 14%;
    --muted-foreground: 240 5% 55%;
    --accent: 217 92% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 4% 16%;
    --input: 240 4% 16%;
    --ring: 217 92% 60%;
  }

  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    @apply font-semibold tracking-tight;
  }

  ::selection {
    @apply bg-accent/20 text-foreground;
  }
}

@layer components {
  .container {
    @apply max-w-7xl mx-auto px-6 sm:px-8 lg:px-12;
  }

  @media (min-width: 1536px) {
    .container {
      max-width: 1440px;
    }
  }

  /* Glass card */
  .glass-card {
    @apply bg-white dark:bg-[hsl(240,6%,7%)] border border-slate-200/80 dark:border-slate-800;
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.03),
      0 1px 2px rgba(0,0,0,0.04),
      0 4px 16px rgba(0,0,0,0.04);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .glass-card:hover {
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.04),
      0 2px 4px rgba(0,0,0,0.04),
      0 8px 24px rgba(0,0,0,0.06);
    transform: translateY(-1px);
  }

  /* Navigation */
  .nav-button {
    @apply relative px-3 py-1.5 rounded-md text-[13px] font-medium text-muted-foreground;
    transition: color 0.15s, background-color 0.15s;
  }

  .nav-button:hover {
    @apply text-foreground bg-slate-100 dark:bg-slate-800/80;
  }

  .nav-button.active {
    @apply text-foreground bg-slate-100 dark:bg-slate-800;
  }

  /* Gradient text */
  .gradient-text {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(135deg, hsl(var(--accent)) 0%, #a78bfa 100%);
  }

  /* Dot grid background */
  .dot-grid {
    @apply relative overflow-hidden;
  }

  .dot-grid::before {
    content: '';
    @apply absolute inset-0 pointer-events-none;
    background-image: radial-gradient(circle at 1px 1px, hsl(var(--border)) 1px, transparent 0);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 50% 60% at 50% 40%, black, transparent);
    -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 40%, black, transparent);
  }

  /* Subtle glow */
  .glow-bg::after {
    content: '';
    @apply absolute pointer-events-none;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 500px;
    background: radial-gradient(ellipse, hsla(var(--accent), 0.08) 0%, transparent 70%);
  }

  /* Bento grid */
  .bento-grid {
    @apply grid gap-4;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(160px, auto);
  }

  @media (max-width: 768px) {
    .bento-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: minmax(140px, auto);
    }
  }

  @media (max-width: 480px) {
    .bento-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Status badge */
  .status-badge {
    @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium;
    @apply bg-emerald-50 dark:bg-emerald-950/40 text-emerald-600 dark:text-emerald-400 border border-emerald-200/60 dark:border-emerald-800/40;
  }

  .status-badge .pulse-dot {
    @apply w-1.5 h-1.5 rounded-full bg-emerald-500;
    animation: pulse-glow 2s ease-in-out infinite;
  }

  /* Section spacing */
  .section {
    @apply py-12 sm:py-16;
  }

  /* Timeline */
  .timeline-line {
    @apply absolute left-6 top-0 bottom-0 w-px;
    background: linear-gradient(to bottom, hsl(var(--border)), transparent);
  }

  .timeline-dot {
    @apply absolute left-4 w-4 h-4 rounded-full border-2 border-slate-300 dark:border-slate-600 bg-background z-10;
    top: 1.5rem;
  }

  .timeline-dot.active {
    @apply border-accent bg-accent;
    box-shadow: 0 0 0 3px hsla(var(--accent), 0.15);
  }

  /* Code-style label */
  .code-label {
    @apply font-mono text-xs text-muted-foreground tracking-wider uppercase;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scroll progress bar */
.scroll-progress {
  background: hsl(var(--accent));
  transition: width 50ms linear;
}

/* Scrollbar */
::-webkit-scrollbar {
  @apply w-1.5;
}

::-webkit-scrollbar-track {
  @apply bg-transparent;
}

::-webkit-scrollbar-thumb {
  @apply bg-slate-300 dark:bg-slate-700 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-400 dark:bg-slate-600;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}