@import "tailwindcss";
@import "../../vendor/livewire/flux/dist/flux.css";

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --color-zinc-50: #fafafa;
  --color-zinc-100: #f5f5f5;
  --color-zinc-200: #e5e5e5;
  --color-zinc-300: #d4d4d4;
  --color-zinc-400: #a3a3a3;
  --color-zinc-500: #737373;
  --color-zinc-600: #525252;
  --color-zinc-700: #404040;
  --color-zinc-800: #262626;
  --color-zinc-900: #171717;
  --color-zinc-950: #0a0a0a;

  --color-accent: var(--color-neutral-800);
  --color-accent-content: var(--color-neutral-800);
  --color-accent-foreground: var(--color-white);
}

@layer theme {
  .dark {
    --color-accent: var(--color-white);
    --color-accent-content: var(--color-white);
    --color-accent-foreground: var(--color-neutral-800);
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

[data-flux-field]:not(ui-radio, ui-checkbox) {
  @apply grid gap-2;
}

[data-flux-label] {
  @apply !mb-0 !leading-tight;
}

input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
  @apply outline-none ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}

@plugin "daisyui";

@plugin "daisyui/theme" {
  name: "bootstrap5-flux";
  default: true;
  prefersdark: false;
  color-scheme: light;

  /* Colores Primarios de Bootstrap 5 */
  --color-primary: oklch(55% 0.25 240); /* Bootstrap Blue */
  --color-primary-content: oklch(98% 0.01 240);

  --color-secondary: oklch(50% 0.05 240); /* Bootstrap Gray */
  --color-secondary-content: oklch(98% 0.01 240);

  --color-accent: oklch(65% 0.25 200); /* Bootstrap Info */
  --color-accent-content: oklch(20% 0.05 200);

  --color-neutral: oklch(25% 0.02 240); /* Bootstrap Dark */
  --color-neutral-content: oklch(95% 0.02 240);

  /* Colores Base */
  --color-base-100: oklch(100% 0 0); /* Blanco */
  --color-base-200: oklch(96% 0.01 240); /* Bootstrap .bg-light */
  --color-base-300: oklch(92% 0.02 240); /* Gris más oscuro */
  --color-base-content: oklch(25% 0.02 240); /* Texto oscuro */

  /* Colores Semánticos */
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);

  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);

  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);

  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  /* Border radius */
  --radius-selector: 0.375rem;
  --radius-field: 0.375rem;
  --radius-box: 0.375rem;

  /* Base sizes */
  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  /* Border size */
  --border: 1px;

  /* Effects */
  --depth: 1;
  --noise: 0;
}
