@import "tailwindcss";

/* ========================================
   THEME CONFIGURATION
   ======================================== */

@theme {
  /* Fonts */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  /* Custom animations */
  --animate-float: float 6s ease-in-out infinite;
  --animate-glow: glow 2s ease-in-out infinite alternate;
  --animate-slide-up: slideUp 0.5s ease-out;
  --animate-fade-in: fadeIn 0.6s ease-out;

  @keyframes float {

    0%,
    100% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-20px);
    }
  }

  @keyframes glow {
    from {
      box-shadow: 0 0 20px -10px oklch(0.7 0.15 200);
    }

    to {
      box-shadow: 0 0 40px -10px oklch(0.75 0.18 200);
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}

/* ========================================
   CSS CUSTOM PROPERTIES - THEME COLORS
   ======================================== */

:root {
  /* Default: Dark theme with blue accents */
  --color-base-100: oklch(0.15 0.02 250);
  --color-base-200: oklch(0.18 0.025 250);
  --color-base-300: oklch(0.25 0.03 250);
  --color-base-content: oklch(0.95 0.01 250);

  --color-primary: oklch(0.70 0.20 240);
  --color-primary-content: oklch(1 0 0);
  --color-secondary: oklch(0.75 0.18 200);
  --color-secondary-content: oklch(0.15 0.02 200);
  --color-accent: oklch(0.65 0.25 260);
  --color-accent-content: oklch(1 0 0);
  --color-neutral: oklch(0.28 0.02 250);
  --color-neutral-content: oklch(0.92 0.01 250);
  --color-info: oklch(0.72 0.14 230);
  --color-success: oklch(0.75 0.18 155);
  --color-warning: oklch(0.82 0.16 85);
  --color-error: oklch(0.68 0.20 25);

  --radius-box: 1.25rem;
  --radius-btn: 0.75rem;
  --radius-badge: 9999px;
}

/* Light theme */
[data-theme="light"] {
  --color-base-100: oklch(0.95 0.015 240);
  --color-base-200: oklch(0.90 0.02 240);
  --color-base-300: oklch(0.85 0.025 240);
  --color-base-content: oklch(0.20 0.03 240);

  --color-primary: oklch(0.55 0.25 240);
  --color-primary-content: oklch(1 0 0);
  --color-secondary: oklch(0.60 0.22 200);
  --color-secondary-content: oklch(1 0 0);
  --color-accent: oklch(0.50 0.28 260);
  --color-accent-content: oklch(1 0 0);
  --color-neutral: oklch(0.45 0.03 240);
  --color-neutral-content: oklch(0.98 0 0);
  --color-info: oklch(0.62 0.16 230);
  --color-success: oklch(0.65 0.20 155);
  --color-warning: oklch(0.78 0.18 85);
  --color-error: oklch(0.58 0.22 25);
}

/* ========================================
   BASE STYLES
   ======================================== */

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-base-100);
    color: var(--color-base-content);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  ::selection {
    background-color: oklch(0.7 0.15 200 / 0.3);
  }
}

/* ========================================
   COMPONENT STYLES - BUTTONS
   ======================================== */

@layer components {

  /* Button base */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: var(--radius-btn);
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
  }

  .btn:hover {
    transform: translateY(-1px);
  }

  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
  }

  .btn-primary:hover {
    filter: brightness(1.1);
  }

  .btn-outline {
    background: transparent;
    border-color: currentColor;
  }

  .btn-outline.btn-primary {
    color: var(--color-primary);
    background: transparent;
  }

  .btn-outline.btn-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
  }

  .btn-ghost {
    background: transparent;
    border: none;
  }

  .btn-ghost:hover {
    background-color: var(--color-base-300);
  }

  .btn-circle {
    border-radius: 9999px;
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }

  .btn-sm.btn-circle {
    width: 2rem;
    height: 2rem;
    padding: 0.25rem;
  }

  .btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
  }

  /* ========================================
     BADGES
     ======================================== */

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-badge);
    border: 1px solid transparent;
  }

  .badge-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
  }

  .badge-secondary {
    background-color: var(--color-secondary);
    color: var(--color-secondary-content);
  }

  .badge-accent {
    background-color: var(--color-accent);
    color: var(--color-accent-content);
  }

  .badge-warning {
    background-color: var(--color-warning);
    color: oklch(0.2 0 0);
  }

  .badge-success {
    background-color: var(--color-success);
    color: oklch(0.2 0 0);
  }

  .badge-error {
    background-color: var(--color-error);
    color: oklch(1 0 0);
  }

  .badge-ghost {
    background-color: var(--color-base-300);
    color: var(--color-base-content);
  }

  .badge-outline {
    background: transparent;
    border-color: currentColor;
  }

  .badge-outline.badge-primary {
    color: var(--color-primary);
    background: transparent;
  }

  .badge-outline.badge-secondary {
    color: var(--color-secondary);
  }

  .badge-outline.badge-accent {
    color: var(--color-accent);
  }

  .badge-outline.badge-warning {
    color: var(--color-warning);
  }

  .badge-outline.badge-success {
    color: var(--color-success);
  }

  .badge-outline.badge-error {
    color: var(--color-error);
  }

  .badge-lg {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
  }

  .badge-sm {
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
  }

  /* ========================================
     NAVBAR
     ======================================== */

  .navbar {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    width: 100%;
  }

  .navbar-start {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .navbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .navbar-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 0.25rem;
  }

  /* ========================================
     MENU
     ======================================== */

  .menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .menu-horizontal {
    flex-direction: row;
  }

  .menu-sm li>a,
  .menu-sm li>button,
  .menu-sm li details summary {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  .menu li {
    position: relative;
    display: flex;
    align-items: center;
  }

  .menu li>a,
  .menu li>button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--color-base-content);
    transition: all 0.2s ease;
  }

  .menu li details {
    position: relative;
    display: flex;
    align-items: center;
  }

  .menu li details summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    list-style: none;
    color: var(--color-base-content);
    font-size: 0.875rem;
    line-height: 1.25rem;
    height: auto;
    margin: 0;
  }

  .menu li details summary::-webkit-details-marker {
    display: none;
  }

  .menu li details summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: auto;
    transition: transform 0.2s ease;
  }

  .menu li details[open] summary::after {
    transform: rotate(-135deg);
  }

  .menu li details>ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    flex-direction: column;
    margin-top: 0.25rem;
  }

  /* ========================================
     CARD
     ======================================== */

  .card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-box);
    overflow: hidden;
  }

  .card-body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 0.5rem;
  }

  .card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
  }

  /* ========================================
     FOOTER
     ======================================== */

  .footer {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem 1rem;
  }

  .footer-center {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  /* ========================================
     THEME TOGGLE
     ======================================== */

  .theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .theme-toggle .icon-sun,
  .theme-toggle .icon-moon {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg);
  }

  .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(-90deg);
  }

  [data-theme="light"] .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(90deg);
  }

  [data-theme="light"] .theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg);
  }

  /* ========================================
     ORIGINAL CUSTOM COMPONENTS
     ======================================== */

  /* Gradient text effect */
  .gradient-text {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Glass morphism card - uses theme-aware colors */
  .glass-card {
    background-color: var(--color-base-200);
    backdrop-filter: blur(24px);
    border: 1px solid var(--color-base-300);
    border-radius: 1.25rem;
    box-shadow: 0 10px 40px -10px oklch(0 0 0 / 0.2);
  }

  /* Hero section styles */
  .hero-gradient {
    background: linear-gradient(135deg, var(--color-base-100), var(--color-base-200), var(--color-base-100));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  /* Project card hover effect - uses theme-aware colors */
  .project-card {
    padding: 1.5rem;
    transition: all 0.3s ease;
    background-color: var(--color-base-200);
    backdrop-filter: blur(24px);
    border: 1px solid var(--color-base-300);
    border-radius: 1.25rem;
    box-shadow: 0 4px 20px -4px oklch(0 0 0 / 0.1);
  }

  .project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px -12px oklch(0 0 0 / 0.25);
    border-color: var(--color-primary);
  }

  /* Blog post card - uses theme-aware colors */
  .post-card {
    padding: 1.5rem;
    transition: all 0.3s ease;
    background-color: var(--color-base-200);
    backdrop-filter: blur(24px);
    border: 1px solid var(--color-base-300);
    border-radius: 1.25rem;
    box-shadow: 0 2px 12px -2px oklch(0 0 0 / 0.08);
  }

  .post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -6px oklch(0 0 0 / 0.15);
    border-color: var(--color-primary);
  }

  /* Docs sidebar link */
  .docs-link {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: oklch(0.9 0.01 260 / 0.7);
    transition: all 0.2s ease;
  }

  .docs-link:hover {
    color: var(--color-base-content);
    background-color: oklch(0.28 0.02 260 / 0.5);
  }

  .docs-link.active {
    background-color: oklch(0.7 0.15 200 / 0.1);
    color: var(--color-primary);
    font-weight: 500;
    border-left: 2px solid var(--color-primary);
  }

  /* Section container */
  .section-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  @media (min-width: 640px) {
    .section-container {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  @media (min-width: 1024px) {
    .section-container {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }

  /* Tech badge */
  .tech-badge {
    transition: all 0.2s ease;
    cursor: default;
  }

  .tech-badge:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  /* Prose styling for content */
  .prose-custom {
    color: var(--color-base-content);
    line-height: 1.75;
  }

  .prose-custom h1,
  .prose-custom h2,
  .prose-custom h3,
  .prose-custom h4 {
    color: var(--color-base-content);
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 0.5em;
  }

  .prose-custom h1 {
    font-size: 2.25rem;
  }

  .prose-custom h2 {
    font-size: 1.75rem;
  }

  .prose-custom h3 {
    font-size: 1.5rem;
  }

  .prose-custom h4 {
    font-size: 1.25rem;
  }

  .prose-custom p {
    margin-bottom: 1.25em;
  }

  .prose-custom a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .prose-custom a:hover {
    opacity: 0.8;
  }

  .prose-custom code {
    background-color: var(--color-base-300);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: var(--font-mono);
    color: var(--color-secondary);
  }

  .prose-custom pre {
    background-color: var(--color-base-300);
    border: 1px solid var(--color-neutral);
    border-radius: 0.75rem;
    padding: 1.25rem;
    overflow-x: auto;
    margin: 1.5em 0;
  }

  .prose-custom pre code {
    background: transparent;
    padding: 0;
    color: var(--color-base-content);
  }

  .prose-custom ul,
  .prose-custom ol {
    padding-left: 1.5em;
    margin-bottom: 1.25em;
  }

  .prose-custom li {
    margin-bottom: 0.5em;
  }

  .prose-custom blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 1em;
    background-color: var(--color-base-200);
    padding: 1em 1em 1em 1.5em;
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
    color: var(--color-base-content);
    margin: 1.5em 0;
  }

  .prose-custom img {
    border-radius: 0.75rem;
    margin: 1.5em 0;
  }

  .prose-custom table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
  }

  .prose-custom th,
  .prose-custom td {
    padding: 0.75rem;
    border: 1px solid var(--color-base-300);
    text-align: left;
  }

  .prose-custom th {
    background-color: var(--color-base-200);
    font-weight: 600;
  }

  .prose-custom hr {
    border: none;
    border-top: 1px solid oklch(1 0 0 / 0.1);
    margin: 2em 0;
  }

  /* ========================================
     TAILWIND COLOR UTILITIES
     ======================================== */

  .bg-base-100 {
    background-color: var(--color-base-100);
  }

  .bg-base-200 {
    background-color: var(--color-base-200);
  }

  .bg-base-300 {
    background-color: var(--color-base-300);
  }

  .text-base-content {
    color: var(--color-base-content);
  }

  .text-primary {
    color: var(--color-primary);
  }

  .text-secondary {
    color: var(--color-secondary);
  }

  .text-accent {
    color: var(--color-accent);
  }

  .text-warning {
    color: var(--color-warning);
  }

  .text-success {
    color: var(--color-success);
  }

  .text-error {
    color: var(--color-error);
  }

  .border-base-200 {
    border-color: var(--color-base-200);
  }

  .border-base-300 {
    border-color: var(--color-base-300);
  }

  .border-primary {
    border-color: var(--color-primary);
  }

  .hover\:bg-base-100:hover {
    background-color: var(--color-base-100);
  }

  .hover\:bg-base-300:hover {
    background-color: var(--color-base-300);
  }

  .hover\:text-base-content:hover {
    color: var(--color-base-content);
  }

  .hover\:text-primary:hover {
    color: var(--color-primary);
  }

  .hover\:text-secondary:hover {
    color: var(--color-secondary);
  }

  .hover\:text-warning:hover {
    color: var(--color-warning);
  }

  .hover\:text-success:hover {
    color: var(--color-success);
  }

  .hover\:text-error:hover {
    color: var(--color-error);
  }

  .hover\:border-primary\/50:hover {
    border-color: oklch(0.75 0.18 15 / 0.5);
  }

  .hover\:border-secondary\/50:hover {
    border-color: oklch(0.70 0.20 300 / 0.5);
  }

  .hover\:border-warning\/50:hover {
    border-color: oklch(0.82 0.16 85 / 0.5);
  }

  .hover\:border-success\/50:hover {
    border-color: oklch(0.75 0.18 155 / 0.5);
  }

  .hover\:border-error\/50:hover {
    border-color: oklch(0.68 0.20 25 / 0.5);
  }

  .group:hover .group-hover\:text-primary {
    color: var(--color-primary);
  }

  .group:hover .group-hover\:text-secondary {
    color: var(--color-secondary);
  }

  .group:hover .group-hover\:text-warning {
    color: var(--color-warning);
  }

  .group:hover .group-hover\:text-success {
    color: var(--color-success);
  }

  .group:hover .group-hover\:text-error {
    color: var(--color-error);
  }

  .group:hover .group-hover\:bg-primary\/20 {
    background-color: oklch(0.75 0.18 15 / 0.2);
  }
}

/* ========================================
   UTILITY STYLES
   ======================================== */

@layer utilities {
  .grid {
    display: grid;
  }
  
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  .gap-4 {
    gap: 1rem;
  }
  
  .gap-6 {
    gap: 1.5rem;
  }
  
  @media (min-width: 640px) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  @media (min-width: 768px) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  
  @media (min-width: 1024px) {
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .text-balance {
    text-wrap: balance;
  }

  .animate-delay-100 {
    animation-delay: 100ms;
  }

  .animate-delay-200 {
    animation-delay: 200ms;
  }

  .animate-delay-300 {
    animation-delay: 300ms;
  }

  .animate-delay-500 {
    animation-delay: 500ms;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}