@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;
}

/* === CSS VARIABLES (THEME) === */

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --surface: #ffffff;
  --text-primary: #1f1f1f;
  --text-secondary: #667085;
  --border: #d6d8db;
  --accent: #4f46e5;
  --hover: #eef0f3;
  --muted: #a0aec0;
  --error: #ef4444;
  --divider: #e5e7eb;
  --divider-light: #d6d8db;

  --border-error: #dc2626;

  --text-input: #000000;
  --focus-input: #000000;

  --swiipo-brand: #4f46e5;
  --swiipo-brand-hover: #4338ca;
  --swiipo-brand-light: #ecefff;

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

  --selection-bg: rgba(79, 70, 229, 0.1);
  --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: #757575;
  --error: #992222;
  --divider: #1a1a1a;
  --divider-light: #2b2b2b;

  --border-error: #f87171;

  --text-input: #ffffff;
  --focus-input: #10b981;

  --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 === */

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

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

/* === SCROLLBAR === */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--muted) var(--bg-primary);
}

*::-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 HELPERS === */

.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-divider-light {
  background-color: var(--divider-light);
}
.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 HELPERS === */

.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);
}

/* === CUSTOM UTILITIES (TAILWIND v4) === */
/* IMPORTANT: @utility doit être au niveau racine (pas imbriqué) */

@utility border-default {
  border-color: var(--border);
}

.border-default\/50 {
  border-color: color-mix(in srgb, var(--border) 50%, transparent);
}

@utility border-error {
  border-color: var(--border-error);
}

.border-error\/50 {
  border-color: color-mix(in srgb, var(--border-error) 50%, transparent);
}

@utility border-accent {
  border-color: var(--accent);
}
@utility border-hover {
  border-color: var(--hover);
}
@utility border-swiipo-brand {
  border-color: var(--swiipo-brand);
}

/* === RING HELPER === */

@layer components {
  .swiipo-ring-1-offset {
    @apply ring ring-offset-1 rounded-full;
    --tw-ring-color: var(--border);
    --tw-ring-offset-color: var(--bg-secondary);
  }

  .swiipo-ring-offset {
    @apply ring ring-offset-3 rounded-full;
    --tw-ring-color: var(--border);
    --tw-ring-offset-color: var(--bg-secondary);
  }
}

.swiipo-ring {
  --tw-ring-inset: inset;
  --tw-ring-color: var(--border);
  box-shadow: var(--tw-ring-inset) 0 0 0 1px var(--tw-ring-color);
}

/* === BASE RESET === */

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

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

.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;
}

/* === COMPONENTS === */
@layer components {
  .swiipo-button {
    @apply inline-flex justify-center items-center gap-1
           overflow-hidden rounded-lg font-medium transition
           px-3 py-1.5 text-xs cursor-pointer z-10
           bg-black/20 text-black ring-1 ring-black/40
           hover:bg-black/30 hover:text-black hover:ring-black/70
           dark:bg-emerald-400/10 dark:text-emerald-300/80 dark:ring-1 dark:ring-emerald-400/20
           dark:hover:bg-emerald-400/20 dark:hover:text-emerald-300 dark:hover:ring-emerald-400/50;
  }

  .swiipo-button-check {
    @apply inline-flex justify-center items-center gap-1
         overflow-hidden rounded-lg font-medium transition
         px-3 py-1.5 text-xs cursor-pointer z-10
         bg-emerald-500/10 text-emerald-800 ring-1 ring-emerald-600/30
         hover:bg-emerald-500/20 hover:text-emerald-900 hover:ring-emerald-600/50
         dark:bg-emerald-400/10 dark:text-emerald-300/80 dark:ring-1 dark:ring-emerald-400/20
         dark:hover:bg-emerald-400/20 dark:hover:text-emerald-300 dark:hover:ring-emerald-400/50;
  }

  .swiipo-button-danger {
    @apply inline-flex justify-center items-center gap-1
         rounded-lg font-medium transition px-3 py-1.5 text-xs cursor-pointer z-10
         bg-red-500/20 text-red-700
         ring-1 ring-red-500/40
         hover:bg-red-500/30 hover:text-red-800 hover:ring-red-500/70
         dark:bg-red-400/10 dark:text-red-300/80 dark:ring-red-400/20
         dark:hover:bg-red-400/20 dark:hover:text-red-300 dark:hover:ring-red-400/50;
  }

  .swiipo-button-danger-xs {
    @apply inline-flex justify-center items-center gap-1
         rounded-xs font-medium transition px-1.5 py-0.5 text-xs cursor-pointer z-10
         bg-red-500/20 text-red-700
         ring-1 ring-red-500/40
         hover:bg-red-500/30 hover:text-red-800 hover:ring-red-500/70
         dark:bg-red-400/10 dark:text-red-300/80 dark:ring-red-400/20
         dark:hover:bg-red-400/20 dark:hover:text-red-300 dark:hover:ring-red-400/50;
  }

  .swiipo-button-gray {
    @apply inline-flex justify-center items-center gap-1
         overflow-hidden rounded-lg font-medium transition
         px-3 py-1.5 text-xs cursor-pointer z-10
         bg-black/20 text-black ring-1 ring-black/40
         hover:bg-black/30 hover:text-black hover:ring-black/70
         dark:bg-zinc-400/10 dark:text-zinc-300/80 dark:ring-1 dark:ring-zinc-400/20
         dark:hover:bg-zinc-400/20 dark:hover:text-zinc-300 dark:hover:ring-zinc-400/50;
  }

  .swiipo-button-fuchsia {
    @apply inline-flex justify-center items-center gap-1
         overflow-hidden rounded-lg font-medium transition
         px-3 py-1.5 text-xs cursor-pointer z-10
         bg-fuchsia-500/10 text-fuchsia-800 ring-1 ring-fuchsia-600/30
         hover:bg-fuchsia-500/20 hover:text-fuchsia-900 hover:ring-fuchsia-600/50
         dark:bg-fuchsia-400/10 dark:text-fuchsia-300/80 dark:ring-1 dark:ring-fuchsia-400/20
         dark:hover:bg-fuchsia-400/20 dark:hover:text-fuchsia-300 dark:hover:ring-fuchsia-400/50;
  }

  .swiipo-choice {
    @apply px-3 py-1.5 rounded-md text-xs font-medium
           inline-flex items-center justify-center gap-1
           cursor-pointer transition-colors duration-200
           border border-default text-neutral-500
           dark:text-neutral-400;
  }

  .swiipo-choice-active {
    @apply bg-emerald-500/20 text-white border border-emerald-500/40
         dark:bg-emerald-400/10 dark:text-white dark:border dark:border-emerald-400/20;
  }

  .swiipo-button-ex {
    @apply inline-flex justify-center items-center gap-1
           overflow-hidden rounded-full font-medium transition
           px-3 py-1.5 text-xs cursor-pointer z-10
           bg-[#36b49f]/20 text-[#1a5a4f] ring-1 ring-inset ring-[#36b49f]/40
           hover:bg-[#36b49f]/30 hover:text-[#124139] hover:ring-[#36b49f]/70
           dark:bg-[#36b49f]/10 dark:text-[#75ffed]/80 dark:ring-1 dark:ring-inset dark:ring-[#75ffed]/20
           dark:hover:bg-[#36b49f]/20 dark:hover:text-[#75ffed] dark:hover:ring-[#75ffed]/50;
  }

  .swiipo-button-logout {
    @apply inline-flex items-center justify-center relative
           rounded-md px-4 py-2 text-xs font-medium transition
           ring-1 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;
  }

  @keyframes swiipo-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .swiipo-spinner-red {
    @apply inline-block align-middle rounded-full border-solid border-red-500/30 border-t-red-500 border-r-transparent dark:border-red-400/20 dark:border-t-red-400;
    width: 16px;
    height: 16px;
    border-width: 3px;
    animation: swiipo-spin 0.75s linear infinite;
  }

  .swiipo-spinner-emerald {
    @apply inline-block align-middle rounded-full border-solid border-emerald-500/30 border-t-emerald-500 border-r-transparent dark:border-emerald-400/20 dark:border-t-emerald-400;
    width: 16px;
    height: 16px;
    border-width: 3px;
    animation: swiipo-spin 0.75s linear infinite;
  }

  .swiipo-spinner-orange {
    @apply inline-block align-middle rounded-full border-solid border-orange-500/30 border-t-orange-500 border-r-transparent dark:border-orange-400/20 dark:border-t-orange-400;
    width: 16px;
    height: 16px;
    border-width: 3px;
    animation: swiipo-spin 0.75s linear infinite;
  }

  .swiipo-spinner-yellow {
    @apply inline-block align-middle rounded-full border-solid border-yellow-500/30 border-t-yellow-500 border-r-transparent dark:border-yellow-400/20 dark:border-t-yellow-400;
    width: 16px;
    height: 16px;
    border-width: 3px;
    animation: swiipo-spin 0.75s linear infinite;
  }

  .swiipo-spinner-bandw {
    @apply inline-block align-middle rounded-full border-solid border-black/30 border-t-black border-r-transparent dark:border-white/20 dark:border-t-white;
    width: 16px;
    height: 16px;
    border-width: 3px;
    animation: swiipo-spin 0.75s linear infinite;
  }
}