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

/* Variante personnalisée pour le thème sombre */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* ============================================
   THÈME - Tokens (couleurs, fontes, etc.)
   ============================================ */
@theme {
  /* Palette de la marque */
  --color-brand-50: #f5f3ff;
  --color-brand-100: #ede9fe;
  --color-brand-200: #ddd6fe;
  --color-brand-300: #c4b5fd;
  --color-brand-400: #a78bfa;
  --color-brand-500: #8b5cf6;
  --color-brand-600: #7c3aed;
  --color-brand-700: #6d28d9;
  --color-brand-800: #5b21b6;
  --color-brand-900: #4c1d95;
  --color-brand-950: #2e1065;

  /* Typographies */
  /* --font-title: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-subtitle: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; */

  /* Footer */
  --color-footer: #e6e6e7;
  --color-footer-top: #ffffff;
  --color-footer-base: #e4e1e1;
}

/* ============================================
   THÈME CLAIR - Variables CSS
   ============================================ */
:root {
  /* Arrière-plans (renommés) */
  --color-base: #f5f1ea;
  /* ex --color-bg-base */
  --color-soft: #edeef0c9;
  /* ex --color-bg-soft */
  --color-surface: #ffffff;
  --color-clean: #ffffff;

  /* Textes */
  --color-text: #1f2937;
  --color-text-muted: #6b7280;

  /* Bordures et séparateurs */
  --color-border: #e5e7eb;
  --color-divider: #e5e7eb;
  --color-divider-soft: #f1f5f9;

  /* Accents et interactions */
  --color-accent: #6b7280;
  --surface-hover: #f3f4f6;

  /* Inputs */
  --input-text: #111827;
  --input-focus: #111827;

  /* États d'erreur */
  --state-error: #dc2626;
  --state-error-border: #ef4444;

  /* Brand theme */
  --brand-th: #6b7280;
  --brand-th-hover: #4b5563;
  --brand-th-soft: #f3f4f6;
  --brand-th-gradient: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);

  /* Sélection de texte */
  --selection-bg: rgba(107, 114, 128, 0.18);
  --selection-text: #1f2937;

  /* Footer */
  --color-footer-top: #ffffff;
  --color-footer-base: #e4e1e1;
}

/* ============================================
   THÈME SOMBRE - Variables CSS
   ============================================ */
[data-theme="dark"] {
  /* Arrière-plans (renommés) */
  --color-base: #121212;
  /* ex --color-bg-base */
  --color-soft: #2b2b2b;
  /* ex --color-bg-soft */
  --color-surface: #1a1a1a;
  --color-clean: #1a1a1a;

  /* Textes */
  --color-text: #ffffff;
  --color-text-muted: #afafaf;

  /* Bordures et séparateurs */
  --color-border: #2b2b2b;
  --color-divider: #1a1a1a;
  --color-divider-soft: #2b2b2b;

  /* Accents et interactions */
  --color-accent: #9ca3af;
  --surface-hover: #262626;

  /* Inputs */
  --input-text: #ffffff;
  --input-focus: #e5e7eb;

  /* États d'erreur */
  --state-error: #f87171;
  --state-error-border: #fca5a5;

  /* Brand theme */
  --brand-th: #9ca3af;
  --brand-th-hover: #d1d5db;
  --brand-th-soft: #262626;
  --brand-th-gradient: linear-gradient(135deg, #1f2937 0%, #111827 100%);

  /* Sélection de texte */
  --selection-bg: rgba(156, 163, 175, 0.25);
  --selection-text: #ffffff;

  /* Footer */
  --color-footer-top: #1a1a1a;
  --color-footer-base: #242424;
}

/* ============================================
   UTILITAIRES GÉNÉRAUX (fonts, bordures)
   ============================================ */
@layer utilities {
  .font-title {
    font-family: var(--font-title);
  }

  .font-subtitle {
    font-family: var(--font-subtitle);
  }

  .font-text {
    font-family: var(--font-text);
  }

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

/* ============================================
   CLASSES D’ARRIÈRE-PLAN (gardées, pointent vers les nouvelles vars)
   ============================================ */
.bg-base {
  background-color: var(--color-base);
}

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

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

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

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

/* Hovers d’arrière-plan */
.hover\:bg-base:hover {
  background-color: var(--color-base);
}

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

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

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

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

/* ============================================
   CLASSES DE TEXTE
   ============================================ */
.text-base {
  color: var(--color-text);
}

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

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

/* ============================================
   CLASSES DE BORDURES
   ============================================ */
.border-divider {
  border-color: var(--color-divider);
}

.border-divider-soft {
  border-color: var(--color-divider-soft);
}

/* ============================================
   INTERACTIONS HOVER (texte / surface)
   ============================================ */
.hover-surface:hover {
  background-color: var(--surface-hover);
}

.hover-brand:hover {
  color: var(--brand-th-hover);
}

/* ============================================
   SÉLECTION DE TEXTE
   ============================================ */
::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

/* ============================================
   EFFETS SPÉCIAUX - Contour de texte
   ============================================ */
.text-outline-emerald {
  @apply text-transparent font-extrabold tracking-wide;
  -webkit-text-stroke: 1px theme("colors.emerald.500");
}

.text-outline-black {
  @apply text-transparent font-extrabold tracking-wide;
  -webkit-text-stroke: 4px #000000;
  margin-left: 4px;
  margin-right: 2px;
}

.text-outline-white {
  @apply text-transparent font-extrabold tracking-wide;
  -webkit-text-stroke: 4px #ffffff;
  margin-left: 4px;
  margin-right: 2px;
}

@media (max-width: 1023px) {
  .text-outline-white {
    -webkit-text-stroke: 2px #ffffff;
  }

  .text-outline-black {
    -webkit-text-stroke: 2px #000000;
  }
}

.dark .text-outline-emerald {
  -webkit-text-stroke: 1px theme("colors.emerald.400");
}

.text-outline-purple {
  @apply text-transparent font-extrabold tracking-wide;
  -webkit-text-stroke: 2px theme("colors.purple.400");
}

.dark .text-outline-yellow {
  -webkit-text-stroke: 3px theme("colors.purple.400");
}

/* ============================================
   UTILITAIRES PERSONNALISÉS (v4) — RINGS
   ============================================ */
@layer components {
  .thomas-ring-1-offset {
    @apply ring ring-offset-1 rounded-full;
    --tw-ring-color: var(--border);
    --tw-ring-offset-color: var(--bg-secondary);
  }

  .thomas-border-ring-offset-3 {
    @apply border ring ring-offset-3 rounded-full;
    border-color: var(--color-soft);
    --tw-ring-color: var(--color-soft);
    --tw-ring-offset-color: var(--color-surface);
  }

  .thomas-border-ring-offset-2 {
    @apply ring ring-offset-5 rounded-lg;
    --tw-ring-color: var(--color-soft);
    --tw-ring-offset-color: var(--color-surface);
  }
}

.ring-default {
  --tw-ring-color: var(--color-soft);
}

.ring-offset-base {
  @apply ring ring-offset-3 rounded-full;
  --tw-ring-offset-color: var(--color-surface);
}