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

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

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

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

/* === Polices utilitaires === */
@utility font-title {
  font-family: var(--font-title);
}
@utility font-subtitle {
  font-family: var(--font-subtitle);
}
@utility font-text {
  font-family: var(--font-text);
}

/* === Classes Kotid === */
.thomas-title {
  @apply font-title tracking-tight;
}

.thomas-subtitle {
  @apply font-subtitle tracking-tight;
}

.thomas-text {
  @apply font-text leading-7;
}

.thomas-btn-label {
  @apply font-subtitle font-medium;
}

:root {
  --color-bg: #ffffff;
  --color-bg-soft: #f7f7f8;
  --color-surface: #ffffff;

  --color-text: #1f2937;
  --color-text-muted: #6b7280;

  --color-border: #e5e7eb;
  --color-divider: #e5e7eb;
  --color-divider-soft: #f1f5f9;

  --color-accent: #6b7280;
  --surface-hover: #f3f4f6;

  --input-text: #111827;
  --input-focus: #111827;

  --state-error: #dc2626;
  --state-error-border: #ef4444;

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

  --selection-bg: rgba(107, 114, 128, 0.18);
  --selection-text: #1f2937;
}

[data-theme="dark"] {
  --color-bg: #121212;
  --color-bg-soft: #151515;
  --color-surface: #1a1a1a;
  --color-clean: #171717;

  --color-text: #ffffff;
  --color-text-muted: #afafaf;

  --color-border: #2b2b2b;
  --color-divider: #1a1a1a;
  --color-divider-soft: #2b2b2b;

  --color-accent: #9ca3af;
  --surface-hover: #262626;

  --input-text: #ffffff;
  --input-focus: #e5e7eb;

  --state-error: #f87171;
  --state-error-border: #fca5a5;

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

  --selection-bg: rgba(156, 163, 175, 0.25);
  --selection-text: #ffffff;
}

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

/* Texte */
.text-base {
  color: var(--color-text);
}
.text-muted {
  color: var(--color-text-muted);
}
.text-accent {
  color: var(--color-accent);
}

/* Bordures */
.border-base {
  border-color: var(--color-border);
}
.border-divider {
  border-color: var(--color-divider);
}
.border-divider-soft {
  border-color: var(--color-divider-soft);
}

/* Hover states */
.hover-surface:hover {
  background-color: var(--surface-hover);
}
.hover-brand:hover {
  color: var(--brand-th-hover);
}

/* Boutons / Brand */
.btn-brand {
  @apply px-3 py-1 rounded-md font-subtitle font-medium transition-colors;
  background-color: var(--brand-th);
  color: var(--color-bg);
}
.btn-brand:hover {
  background-color: var(--brand-th-hover);
}
.btn-brand-soft {
  background-color: var(--brand-th-soft);
  color: var(--color-text);
}
.btn-brand-soft:hover {
  background: var(--brand-th-gradient);
  color: var(--color-text);
}

/* Inputs */
.input-base {
  background-color: var(--color-surface);
  color: var(--input-text);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.input-base:focus {
  border-color: var(--input-focus);
  outline: none;
}

/* États */
.state-error {
  color: var(--state-error);
}
.state-error-border {
  border-color: var(--state-error-border);
}

/* Sélection */
::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}
.thom-button-dashboard {
  @apply gap-1
         overflow-hidden rounded-lg
         px-4 py-1 cursor-pointer z-10 backdrop-blur-md
         /* Light */
         bg-emerald-500/30 text-black/80 ring-1 ring-emerald-500
         hover:bg-emerald-500/40 hover:text-black hover:ring-emerald-600
         /* Dark */
         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;
}

.thom-button-check {
  @apply inline-flex justify-center items-center gap-1
         overflow-hidden rounded-lg
         px-4 py-1 cursor-pointer z-10
         /* Light */
         bg-emerald-500/30 text-black/80 ring-1 ring-emerald-500
         hover:bg-emerald-500/40 hover:text-black hover:ring-emerald-600
         /* Dark */
         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;
}

.thom-button-check-blue {
  @apply inline-flex justify-center items-center gap-1
         overflow-hidden rounded-lg
         px-4 py-1 cursor-pointer z-10
         /* Light */
         bg-blue-500/30 text-black/80 ring-1 ring-blue-500
         hover:bg-blue-500/40 hover:text-black hover:ring-blue-600
         /* Dark */
         dark:bg-blue-400/10 dark:text-blue-300/80 dark:ring-1 dark:ring-blue-400/20
         dark:hover:bg-blue-400/20 dark:hover:text-blue-300 dark:hover:ring-blue-400/50;
}

.text-outline {
  @apply text-transparent font-extrabold uppercase tracking-wide;
  -webkit-text-stroke: 1px theme("colors.emerald.500");
}

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