@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default;
}

/* Custom light theme — OKLCH matching the dark theme's violet palette */
@plugin "daisyui/theme" {
  name: "light";
  color-scheme: light;
  --color-primary: oklch(50% 0.22 277);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(52% 0.22 293);
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(55% 0.14 203);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(25% 0.02 249);
  --color-neutral-content: oklch(98% 0.005 249);
  --color-base-100: oklch(99% 0.005 250);
  --color-base-200: oklch(96% 0.008 251);
  --color-base-300: oklch(92% 0.01 250);
  --color-base-content: oklch(22% 0.02 249);
  --color-info: oklch(55% 0.15 250);
  --color-success: oklch(55% 0.16 155);
  --color-warning: oklch(75% 0.15 85);
  --color-error: oklch(55% 0.22 25);
}

@plugin "daisyui/theme" {
  name: "dark";
  prefersdark: true;
  color-scheme: dark;
  --color-primary: oklch(54.6% 0.245 277);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(55.5% 0.25 293);
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(65.5% 0.155 203);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(27.5% 0.014 249);
  --color-neutral-content: oklch(74.7% 0.016 249);
  --color-base-100: oklch(21.2% 0.014 251);
  --color-base-200: oklch(18.8% 0.013 253);
  --color-base-300: oklch(16.5% 0.011 250);
  --color-base-content: oklch(74.7% 0.016 249);
}

@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius-card: 1rem;
  --duration-transition: 200ms;
}

html,
body,
#__nuxt {
  height: 100%;
}

/* Consistent focus ring for interactive elements */
@layer components {
  .focus-ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-primary);
  }
  button:focus-visible,
  [type="button"]:focus-visible,
  [type="submit"]:focus-visible,
  [type="reset"]:focus-visible,
  a[href]:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [role="button"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-primary);
  }
  /* Unified card style */
  .card-app {
    @apply rounded-xl shadow-xl border border-base-300/50 bg-base-100;
  }
  .card-app.card-bg-base-200 {
    @apply bg-base-200;
  }
  /* Modal box aligned with cards */
  .modal-box {
    @apply rounded-xl border border-base-300/50;
  }
  /* Primary button: subtle transition, no per-page scale */
  .btn-primary {
    @apply transition-[transform,color,background-color] duration-200;
  }
}

@keyframes login-card-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-card {
  animation: login-card-in 0.3s ease-out;
}