@layer base, starlight, theme, components, utilities;

@import "@astrojs/starlight-tailwind";
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

@theme {
  /* Your preferred text font. Starlight uses a system font stack by default. */
  --font-sans: "Atkinson Hyperlegible";
  /* Your preferred code font. Starlight uses system monospace fonts by default. */
  --font-mono: "IBM Plex Mono";
  /* Generated accent color palettes. */
  --color-accent-200: #ddc884;
  --color-accent-600: #816900;
  --color-accent-900: #3e3100;
  --color-accent-950: #2d2300;
  /* Generated gray color palettes - darker variants */
  --color-gray-100: #e8eaed;
  --color-gray-200: #d4d7dc;
  --color-gray-300: #9ca3af;
  --color-gray-400: #6b7280;
  --color-gray-500: #4b5563;
  --color-gray-600: #374151;
  --color-gray-700: #1f2937;
  --color-gray-800: #111827;
  --color-gray-900: #0f172a;
  --color-gray-950: #020617;

  /* Dark mode Starlight theme variables - using darker grays */
  --sl-color-accent-low: var(--color-accent-950);
  --sl-color-accent: var(--color-accent-600);
  --sl-color-accent-high: var(--color-accent-200);
  --sl-color-white: #ffffff;
  --sl-color-gray-1: var(--color-gray-100);
  --sl-color-gray-2: var(--color-gray-200);
  --sl-color-gray-3: var(--color-gray-300);
  --sl-color-gray-4: var(--color-gray-400);
  --sl-color-gray-5: var(--color-gray-500);
  --sl-color-gray-6: var(--color-gray-600);
  --sl-color-black: var(--color-gray-950);

  /* Light mode Starlight theme variables */
  --sl-color-accent-low-light: var(--color-accent-200);
  --sl-color-accent-light: var(--color-accent-600);
  --sl-color-accent-high-light: var(--color-accent-900);
  --sl-color-white-light: var(--color-gray-900);
  --sl-color-gray-1-light: var(--color-gray-800);
  --sl-color-gray-2-light: var(--color-gray-700);
  --sl-color-gray-3-light: var(--color-gray-500);
  --sl-color-gray-4-light: var(--color-gray-400);
  --sl-color-gray-5-light: var(--color-gray-300);
  --sl-color-gray-6-light: var(--color-gray-200);
  --sl-color-gray-7-light: var(--color-gray-100);
  --sl-color-black-light: #ffffff;

  /* Custom darker background colors */
  --custom-bg-primary: #0a0e1a;
  --custom-bg-secondary: #0f1419;
  --custom-bg-tertiary: #151b26;
}

/* Aurora background shimmer (single tasteful animation) */
@layer utilities {
  @keyframes auroraShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  .aurora-bg {
    background-image:
      radial-gradient(60% 80% at 10% 0%, rgba(56,189,248,0.18), transparent 60%),
      radial-gradient(50% 70% at 90% 10%, rgba(168,85,247,0.16), transparent 60%),
      radial-gradient(40% 60% at 30% 10%, rgba(245,158,11,0.12), transparent 60%);
    background-size: 200% 200%;
    animation: auroraShift 22s ease-in-out infinite;
  }
}

body {
  @apply bg-gray-100 dark:bg-[var(--custom-bg-primary)];
}

.header {
  @apply bg-gray-100 dark:bg-[var(--custom-bg-secondary)];
}

.sidebar-content {
  @apply bg-gray-100 dark:bg-[var(--custom-bg-tertiary)];
}

/* Additional dark theme enhancements */
:root[data-theme="dark"] {
  --sl-color-bg: var(--custom-bg-primary);
  --sl-color-bg-nav: var(--custom-bg-secondary);
  --sl-color-bg-sidebar: var(--custom-bg-tertiary);
}

/* Content area dark background */
main {
  @apply dark:bg-[var(--custom-bg-primary)];
}

/* Article content dark background */
article {
  @apply dark:bg-[var(--custom-bg-primary)];
}

/* Homepage accents */
@layer components {
  /* Subtle glow under the hero area */
  .sl-hero {
    position: relative;
  }
  .sl-hero::after {
    content: "";
    position: absolute;
    inset: -20px 0 auto 0;
    height: 160px;
    z-index: -1;
    filter: blur(48px);
    opacity: 0.35;
    background:
      radial-gradient(50% 60% at 15% 0%, rgba(56,189,248,0.22), transparent 70%),
      radial-gradient(40% 60% at 85% 0%, rgba(168,85,247,0.18), transparent 70%);
  }
  /* Use default Starlight code block styling; removed terminal-panel overrides */
  /* Cards: neutral by default; accent only on hover */
  .sl-card {
    @apply transition-all duration-200 border border-white/10 bg-white/5 backdrop-blur-sm;
  }
  .sl-card:hover {
    @apply -translate-y-0.5 shadow-lg ring-1 ring-white/15 bg-white/10;
  }
  /* CTA button inside cards (non-link visual affordance) */
  .sl-card .card-cta {
    @apply mt-3 inline-flex items-center gap-1 text-sm font-medium px-2.5 py-1.5 rounded-md border border-white/15 bg-white/5 text-white/80 transition-colors transition-transform duration-150;
  }
  .sl-card:hover .card-cta {
    @apply border-white/25 bg-white/10 text-white;
  }
  .sl-card .card-cta .arrow {
    @apply transition-transform duration-150;
  }
  .sl-card:hover .card-cta .arrow {
    @apply translate-x-0.5;
  }
  .sl-card .card-cta:focus-visible {
    @apply outline-none ring-2 ring-white/30;
  }
}
