@import "tailwindcss";

/* Variante personnalisée pour les classes utilitaires */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

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

/* Animation shimmer */
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Classe utilitaire shimmer */
.shimmer {
  position: relative;
  overflow: hidden;
  background-color: #1f1f1f; /* Fond primaire ou neutre foncé */
  border-radius: 0.375rem; /* arrondi md */
}

/* Bande animée */
.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s infinite linear;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  color: #1a1a1a;
  background-color: #f8f8f8;
}

[data-theme="dark"] body {
  color: #f1f5f9;
  background-color: #0d0d0d;
}

:root {
  --bg-primary: #f9fafb; /* plus clair que #f8f8f8, plus "moderne" */
  --bg-secondary: #f1f3f5; /* pour encarts gris clair doux */
  --surface: #ffffff; /* surface standard */
  --text-primary: #1f1f1f; /* noir un peu atténué */
  --text-secondary: #667085; /* gris bleu doux (mieux que #555) */
  --border: #d6d8db; /* gris clair chic */
  --accent: #4f46e5; /* conservé */
  --hover: #eef0f3; /* hover doux */
  --muted: #a0aec0; /* gris neutre doux */
  --error: #ef4444; /* rouge moderne et lisible */
  --divider: #e5e7eb; /* séparation légère */

  --swiipo-brand: #4f46e5;
  --swiipo-brand-hover: #4338ca;
  --swiipo-brand-light: #ecefff; /* plus visible que #eef2ff */

  --custom-gradient: linear-gradient(to bottom right, #36b49f, #75ffed);

  --selection-bg: rgba(79, 70, 229, 0.1); /* highlight léger */
  --selection-text: #1f1f1f;
}

[data-theme="dark"] {
  --bg-primary: #0d0d0d;
  --bg-secondary: #151515;
  --surface: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #afafaf;
  --border: #2b2b2b;
  --accent: #303030;
  --hover: #404040;
  --muted: #5a5a5a;
  --error: #992222;
  --divider: #1a1a1a;

  --swiipo-brand: #6366f1; /* indigo-500 */
  --swiipo-brand-hover: #818cf8; /* indigo-400 */
  --swiipo-brand-light: #312e81; /* indigo-900 */
  --swiipo-gradient: linear-gradient(135deg, #a579f9 0%, #7b3fe4 100%);

  /* Gradient personnalisé pour le dark */
  --custom-gradient: linear-gradient(
    to bottom right,
    rgba(56, 189, 248, 0.2),
    rgba(56, 189, 248, 0.2)
  );

  --selection-bg: color-mix(in oklab, #36b49f 40%, transparent);
  --selection-text: #ffffff;
}

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

::-moz-selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

/* Scrollbar styles (WebKit only) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--muted) var(--bg-primary);
}

/* Pour les navigateurs WebKit comme Chrome, Edge et Safari */
*::-webkit-scrollbar {
  width: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--muted);
  border-radius: 4px;
  border: 2px solid var(--bg-primary);
}

/* BACKGROUND */

.bg-primary {
  background-color: var(--bg-primary);
}
.bg-secondary {
  background-color: var(--bg-secondary);
}
.bg-surface {
  background-color: var(--surface);
}
.bg-divider {
  background-color: var(--divider);
}
.bg-accent {
  background-color: var(--accent);
}
.bg-swiipo-brand {
  background-color: var(--swiipo-brand);
}
.bg-swiipo-brand-light {
  background-color: var(--swiipo-brand-light);
}
.bg-swiipo-gradient {
  background: var(--swiipo-gradient);
}

.hover\:bg-primary:hover {
  background-color: var(--bg-primary);
}
.hover\:bg-secondary:hover {
  background-color: var(--bg-secondary);
}
.hover\:bg-surface:hover {
  background-color: var(--surface);
}
.hover\:bg-accent:hover {
  background-color: var(--accent);
}
.hover\:bg-swiipo-brand:hover {
  background-color: var(--swiipo-brand-hover);
}

/* TEXT */

.text-primary {
  color: var(--text-primary);
}
.text-secondary {
  color: var(--text-secondary);
}
.text-muted {
  color: var(--muted);
}
.text-error {
  color: var(--error);
}
.text-swiipo-brand {
  color: var(--swiipo-brand);
}

/* BORDER */

.border-default {
  border-color: var(--border);
}
.border-accent {
  border-color: var(--accent);
}
.border-hover {
  border-color: var(--hover);
}
.border-swiipo-brand {
  border-color: var(--swiipo-brand);
}

/* === BASE === */

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* === UTILS SWIIPO === */

.swiipo-text {
  color: var(--swiipo-brand);
}
.swiipo-bg {
  background-color: var(--swiipo-brand);
  color: white;
}
.swiipo-bg:hover {
  background-color: var(--swiipo-brand-hover);
}
.swiipo-border {
  border: 1px solid var(--swiipo-brand);
}
.swiipo-gradient {
  background: var(--swiipo-gradient);
  color: white;
}
.swiipo-badge {
  background-color: var(--swiipo-brand-light);
  color: var(--swiipo-brand);
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* === STRIPE-INSPIRED BUTTONS === */

.btn,
.btn-stripe-secondary {
  font-weight: 600;
  padding: 0.8rem 1.25rem;
  border-radius: 0.625rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.25;
  text-decoration: none;
}

.btn {
  background-color: #121212;
  color: white;
}

.btn:hover {
  background-color: #1e293b;
}

.btn-stripe-secondary {
  background-color: white;
  color: #0d0d0d;
  border: 1px solid #e2e8f0;
}

.btn-stripe-secondary:hover {
  background-color: #f9fafb;
  border-color: #cbd5e1;
}

[data-theme="dark"] .btn {
  background-color: #f1f5f9;
  color: #0d0d0d;
}

[data-theme="dark"] .btn:hover {
  background-color: #e2e8f0;
}

[data-theme="dark"] .btn-stripe-secondary {
  background-color: #121212;
  color: #f1f5f9;
  border-color: #334155;
}

[data-theme="dark"] .btn-stripe-secondary:hover {
  background-color: #121212;
  border-color: #475569;
}

/* === HEADER BUTTONS === */

.btn-stripe-header,
.btn-stripe-header-secondary {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.2;
  text-decoration: none;
}

.btn-stripe-header {
  background-color: #0d0d0d;
  color: white;
  border: 1px solid #dddddd;
}

.btn-stripe-header:hover {
  background-color: #0d0d0d;
  transform: translateY(-2px);
}

.btn-stripe-header-secondary {
  background-color: #f9fafb;
  border: 1px solid #dddddd;
}

.btn-stripe-header-secondary:hover {
  background-color: #f8fafc;
  transform: translateY(-2px);
}

[data-theme="dark"] .btn-stripe-header {
  background-color: #f1f5f9;
  color: #0d0d0d;
  border-color: #2b2b2b;
}

[data-theme="dark"] .btn-stripe-header:hover {
  background-color: #e2e8f0;
}

[data-theme="dark"] .btn-stripe-header-secondary {
  background-color: #1e293b;
  border: 1px solid #2b2b2b;
  color: #f1f5f9;
}

[data-theme="dark"] .btn-stripe-header-secondary:hover {
  background-color: #334155;
}

/* === ANIMATION === */

@keyframes pulse-connected {
  0% {
    transform: scale(0.8);
    opacity: 1;
    box-shadow: 0 0 0 0 oklch(82.8% 0.111 230.318);
  }

  50% {
    transform: scale(1.2);
    opacity: 0.7;
    box-shadow: 0 0 10px 5px oklch(68.5% 0.169 237.323);
  }

  100% {
    transform: scale(0.8);
    opacity: 1;
    box-shadow: 0 0 0 0 oklch(68.5% 0.169 237.323);
  }
}

.animate-pulse-connected {
  animation: pulse-connected 1.5s infinite;
  animation-timing-function: ease-in-out;
}

/* === SWIIPO BUTTON (light & dark) === */
@layer components {
  .swiipo-bouton {
    /* Base */
    @apply inline-flex items-center rounded-md px-2 py-2
           text-xs font-medium ring-1 ring-inset duration-300;

    /* Light */
    @apply bg-sky-700/20 text-sky-800 ring-sky-800/20 hover:ring-sky-800/60;

    /* Dark */
    @apply dark:bg-sky-600/20 dark:text-sky-400
           dark:ring-sky-400/20 hover:dark:ring-sky-400/60;
  }
}

.swiipo-button {
  @apply inline-flex items-center rounded-md 
         bg-[#36b49f]/30 dark:bg-[#36b49f]/10
         px-2 py-2 text-xs text-[#1a5a4f] dark:text-[#75ffed]
         ring-1 ring-[#36b49f]/40 dark:ring-[#75ffed]/20
         hover:ring-[#36b49f]/80 hover:dark:ring-[#75ffed]/60
         ring-inset hover:duration-300 cursor-pointer font-medium;
}

.swiipo-button-logout {
  @apply inline-flex items-center justify-center relative
         rounded-md px-4 py-2 text-xs font-medium transition
         ring-1 ring-inset focus-visible:outline-none disabled:opacity-40
         bg-red-500/20 text-red-700 ring-red-500/30 hover:bg-red-500/30
         dark:bg-red-500/10 dark:text-red-400 dark:ring-red-400/20 hover:dark:ring-red-400/40
         w-full sm:w-auto min-w-[100px] h-9 cursor-pointer;
}
