@import "tailwindcss";
@import "@nuxt/ui";

/*
 * StreakFit — thème « flamme ».
 * Palette primaire = flame (orange→rouge), highlight ember/amber. Base claire + dark.
 */
@theme static {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Échelle "flame" utilisée comme couleur primaire Nuxt UI (app.config primary: 'flame') */
  --color-flame-50: #FFF7ED;
  --color-flame-100: #FFEDD5;
  --color-flame-200: #FED7AA;
  --color-flame-300: #FDBA74;
  --color-flame-400: #FB923C;
  --color-flame-500: #F97316;
  --color-flame-600: #EA580C;
  --color-flame-700: #C2410C;
  --color-flame-800: #9A3412;
  --color-flame-900: #7C2D12;
  --color-flame-950: #431407;

  --color-ember-500: #EF4444;
  --color-amber-glow: #FBBF24;
}

:root {
  --sf-flame-gradient: linear-gradient(160deg, #FBBF24 0%, #F97316 45%, #EF4444 100%);
}

/* Dégradé flamme réutilisable (texte / fond) */
.sf-flame-text {
  background: var(--sf-flame-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sf-flame-bg { background: var(--sf-flame-gradient); }

/* ---- Animation du logo/loader "SF" ---- */
@keyframes sf-flicker {
  0%, 100% { opacity: 1; transform: translateY(0) scaleY(1); }
  25% { opacity: 0.92; transform: translateY(-1%) scaleY(1.04); }
  50% { opacity: 1; transform: translateY(0.5%) scaleY(0.98); }
  75% { opacity: 0.95; transform: translateY(-0.5%) scaleY(1.03); }
}
@keyframes sf-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes sf-rise {
  0% { transform: translateY(6%) scale(0.96); opacity: 0.6; }
  50% { transform: translateY(-3%) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes sf-spin-glow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.sf-logo__flame { transform-origin: 50% 90%; animation: sf-flicker 1.6s ease-in-out infinite; }
.sf-logo__mark { stroke-dasharray: 200; stroke-dashoffset: 200; animation: sf-draw 1.1s ease-out forwards; }

/* Mode "loader" : la flamme monte + halo tournant */
.sf-loader .sf-logo__flame { animation: sf-rise 1.1s ease-in-out infinite alternate; }
.sf-loader .sf-logo__halo { animation: sf-spin-glow 2.4s linear infinite; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .sf-logo__flame, .sf-logo__mark, .sf-loader .sf-logo__flame, .sf-loader .sf-logo__halo { animation: none; }
  .sf-logo__mark { stroke-dashoffset: 0; }
}