@import "tailwindcss";

@source "../../layouts/_default/*.html";
@source "../../layouts/partials/*.html";
@source "../../layouts/partials/head/*.html";
@source "../../layouts/tracks/*.html";

html {
  scroll-padding-top: 4rem; /* Account for fixed header height */
}

:root {
  /* === SURFACE COLORS (Dark Theme) === */
  --color-surface-0: #0a0a0a;
  --color-surface-1: #121212;
  --color-surface-2: #1a1a1a;
  --color-surface-3: #232323;
  --color-surface-4: #2c2c2c;

  /* === TEXT COLORS === */
  --color-text-primary: #e8e8e8;
  --color-text-secondary: #888888;
  --color-text-muted: #555555;

  /* === ACCENT === */
  --color-accent: #ffffff;
  --color-accent-dim: #666666;
  --color-accent-glow: rgba(255, 255, 255, 0.1);

  /* === BORDERS === */
  --color-border: #2a2a2a;

  /* === TYPOGRAPHY === */
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;

  /* === ANIMATION === */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-page: 400ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* === SPACING === */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;
}

@theme inline {
  /* Map CSS vars to Tailwind colors */
  --color-surface-0: var(--color-surface-0);
  --color-surface-1: var(--color-surface-1);
  --color-surface-2: var(--color-surface-2);
  --color-surface-3: var(--color-surface-3);
  --color-surface-4: var(--color-surface-4);
  --color-text-primary: var(--color-text-primary);
  --color-text-secondary: var(--color-text-secondary);
  --color-text-muted: var(--color-text-muted);
  --color-accent: var(--color-accent);
  --color-border: var(--color-border);

  /* Font family */
  --font-family-mono: var(--font-mono);

  /* Z-index */
  --z-index-sticky: 200;
  --z-index-visualizer: 5;
  --z-index-player: 400;
}

@layer base {
  html {
    font-family: var(--font-mono);
    background: var(--color-surface-0);
    color: var(--color-text-primary);
    letter-spacing: 0.02em;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  body {
    min-height: 100vh;
  }

  ::selection {
    background: var(--color-accent);
    color: var(--color-surface-0);
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: var(--color-surface-1);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--color-surface-3);
    border-radius: var(--radius-full);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-surface-4);
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }
  a:hover {
    color: var(--color-accent);
  }
}

@layer components {
  /* htmx transitions */
  .htmx-request #main-content {
    opacity: 0;
    transform: translateY(8px);
    transition: all var(--duration-page) var(--ease-out);
  }
  .htmx-settling #main-content {
    opacity: 1;
    transform: translateY(0);
  }

  /* Animations */
  .fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: all var(--duration-slow) var(--ease-out);
  }
  .fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .link-hover {
    position: relative;
  }
  .link-hover::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-normal) var(--ease-out);
  }
  .link-hover:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* Audio Player */
  .audio-player {
    background: var(--color-surface-1);
    border-top: 1px solid var(--color-border);
  }
  .audio-player__progress {
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--color-surface-3);
    cursor: pointer;
  }
  .audio-player__progress::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    border-radius: var(--radius-full);
  }

  /* Track Card */
  .track-card {
    background: rgba(18, 18, 18, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    transition: all var(--duration-normal) var(--ease-out);
  }
  .track-card:hover {
    background: rgba(18, 18, 18, 0.8);
    border-color: var(--color-surface-4);
    transform: translateY(-2px);
  }
  .track-card__cover {
    aspect-ratio: 1;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter var(--duration-normal);
  }
  .track-card:hover .track-card__cover {
    filter: grayscale(0%);
  }

  /* Prose */
  .prose {
    color: var(--color-text-secondary);
    line-height: 1.75;
  }
  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4 {
    color: var(--color-text-primary);
    font-weight: 500;
    margin-top: 2em;
    margin-bottom: 0.5em;
  }
  .prose h1 {
    font-size: 2rem;
  }
  .prose h2 {
    font-size: 1.5rem;
  }
  .prose h3 {
    font-size: 1.25rem;
  }
  .prose p {
    margin-bottom: 1.25em;
  }
  .prose a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .prose strong {
    color: var(--color-text-primary);
    font-weight: 600;
  }
  .prose ul,
  .prose ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
  }
  .prose li {
    margin-bottom: 0.5em;
  }
  .prose code {
    background: var(--color-surface-2);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
  }
  .prose pre {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1em;
    overflow-x: auto;
    margin: 1.5em 0;
  }
  .prose pre code {
    background: none;
    padding: 0;
  }
}

@layer utilities {
  .container-narrow {
    max-width: 48rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
  }
  .container-wide {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
  }
  .z-sticky {
    z-index: 200;
  }
  .z-visualizer {
    z-index: -1;
    opacity: 0.25;
  }
  .z-player {
    z-index: 400;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}