/* assets/styles.css */

/* Variables CSS pour tokens de couleur */
:root {
  /* Couleurs primaires */
  --color-primary: 14 165 233; /* sky-500 */
  --color-primary-dark: 2 132 199; /* sky-600 */
  --color-accent: 168 85 247; /* purple-500 */
  
  /* Couleurs neutres mode clair */
  --color-bg: 248 250 252; /* slate-50 */
  --color-bg-elevated: 255 255 255; /* white */
  --color-text: 15 23 42; /* slate-900 */
  --color-text-muted: 71 85 105; /* slate-600 */
  --color-text-subtle: 100 116 139; /* slate-500 */
  --color-border: 226 232 240; /* slate-200 */
  --color-border-subtle: 241 245 249; /* slate-100 */
}

html.dark {
  /* Couleurs neutres mode sombre */
  --color-bg: 2 6 23; /* slate-950 */
  --color-bg-elevated: 15 23 42; /* slate-900 */
  --color-text: 248 250 252; /* slate-50 */
  --color-text-muted: 203 213 225; /* slate-300 */
  --color-text-subtle: 148 163 184; /* slate-400 */
  --color-border: 30 41 59; /* slate-800 */
  --color-border-subtle: 51 65 85; /* slate-700 */
}

/* Petites classes réutilisées dans les pages */

.badge-tech {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs bg-slate-100 dark:bg-slate-900/70 border border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-200 font-medium transition-colors duration-150;
}

.project-card {
  @apply rounded-2xl border border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-900/60 p-6 transition-all duration-200 hover:shadow-lg hover:shadow-sky-500/10 hover:border-sky-500/30 dark:hover:border-sky-500/50;
}

.project-title {
  @apply text-lg font-semibold text-slate-900 dark:text-slate-50;
}

.project-meta {
  @apply text-xs text-slate-500 dark:text-slate-400;
}

.project-text {
  @apply text-sm text-slate-700 dark:text-slate-200 leading-relaxed;
}

.project-tags {
  @apply flex flex-wrap gap-2 mt-4;
}

.project-link {
  @apply text-xs sm:text-sm text-sky-600 dark:text-sky-400 hover:underline whitespace-nowrap font-medium transition-colors;
}

/* Boutons CTA */
.btn-primary {
  @apply inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-sky-500 to-sky-600 hover:from-sky-600 hover:to-sky-700 text-white text-sm font-semibold shadow-lg shadow-sky-500/25 transition-all duration-200 hover:scale-105 hover:shadow-xl hover:shadow-sky-500/30;
}

.btn-secondary {
  @apply inline-flex items-center gap-2 px-5 py-2.5 rounded-full border-2 border-slate-300 dark:border-slate-700 text-sm text-slate-700 dark:text-slate-200 font-medium hover:border-sky-500 hover:text-sky-600 dark:hover:text-sky-400 transition-all duration-200 hover:scale-105;
}

.btn-ghost {
  @apply inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-sm text-slate-600 dark:text-slate-300 font-medium hover:bg-slate-100 dark:hover:bg-slate-800/50 transition-all duration-150;
}

/* Badges tech colorés par catégorie */
.badge-frontend {
  @apply badge-tech bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-900 text-blue-700 dark:text-blue-300;
}

.badge-backend {
  @apply badge-tech bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-900 text-green-700 dark:text-green-300;
}

.badge-database {
  @apply badge-tech bg-purple-50 dark:bg-purple-950/30 border-purple-200 dark:border-purple-900 text-purple-700 dark:text-purple-300;
}

.badge-tool {
  @apply badge-tech bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-900 text-amber-700 dark:text-amber-300;
}

/* Bannière hero pour pages projet */
.project-hero {
  @apply w-full h-64 sm:h-80 rounded-2xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-lg bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-800;
}

/* Carrousel/Grid screenshots */
.screenshot-grid {
  @apply grid grid-cols-1 md:grid-cols-2 gap-4 mt-6;
}

.screenshot-item {
  @apply rounded-xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-md hover:shadow-xl transition-shadow duration-200;
}

/* Animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp 0.5s ease-out forwards;
}

/* Section spacing */
.section-spacing {
  @apply mt-16 sm:mt-20 lg:mt-24;
}

/* Cards grid améliorées */
.cards-grid {
  @apply grid md:grid-cols-2 gap-6 lg:gap-8;
}

.cards-grid-3 {
  @apply grid md:grid-cols-2 lg:grid-cols-3 gap-6;
}

/* Nouvelles classes pour page projets avec thumbnails */
.project-card-visual {
  @apply relative rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/80 overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:border-sky-500/50;
  box-shadow: 0 8px 22px rgba(2,6,23,0.04);
}

.tech-icon-badge {
  @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 font-medium transition-colors hover:border-sky-500/50;
}

.btn-card-primary {
  @apply inline-flex items-center justify-center gap-3 px-5 py-2 rounded-full bg-gradient-to-r from-sky-500 to-purple-600 text-white text-sm font-semibold transition-transform duration-220;
  border: 1px solid rgba(255,255,255,0.06);
  will-change: transform;
}

/* Hover / focus */
.btn-card-primary:hover, .btn-card-primary:focus-visible {
  transform: translateY(-6px);
}

/* Ensure CTA is above the full-card overlay */
.project-card-visual .btn-card-primary {
  @apply relative z-20;
}

/* Subtle highlight overlay on hover for the whole card */
.project-card-visual::after {
  content: "";
  @apply absolute inset-0 rounded-2xl pointer-events-none transition-opacity duration-300 opacity-0;
  background: linear-gradient(180deg, rgba(var(--color-primary), 0.06), rgba(255,255,255,0));
}
.project-card-visual:hover::after {
  opacity: 1;
}

/* Stronger card shadow on hover (visual emphasis on card, not button) */
.project-card-visual:hover {
  box-shadow: 0 28px 70px rgba(14,165,233,0.10);
}

/* Make the CTA stand out when hovering the card */
.project-card-visual:hover .btn-card-primary {
  transform: translateY(-6px);
}

/* Animated arrow inside CTA */
.btn-card-primary .btn-arrow {
  display: inline-flex;
  width: 1em;
  height: 1em;
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 180ms;
}
.project-card-visual:hover .btn-card-primary .btn-arrow {
  transform: translateX(8px);
  opacity: 0.98;
}

/* Focus styles for keyboard users */
.btn-card-primary:focus-visible {
  outline: 3px solid rgba(var(--color-primary), 0.18);
  outline-offset: 3px;
}

.btn-card-secondary {
  @apply inline-flex items-center justify-center w-10 h-10 rounded-lg border-2 border-slate-200 dark:border-slate-700 text-lg hover:border-sky-500 hover:bg-sky-50 dark:hover:bg-sky-950/30 transition-all duration-200;
}

.filter-btn {
  @apply px-4 py-2 rounded-full text-sm font-medium border-2 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:border-sky-500 hover:text-sky-600 dark:hover:text-sky-400 transition-all duration-200;
}

.filter-btn.active {
  @apply bg-gradient-to-r from-sky-500 to-sky-600 text-white border-sky-500 shadow-lg shadow-sky-500/30;
}

/* Utilitaires supplémentaires */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}