/* ─── Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

@import "tailwindcss";
@plugin "daisyui";

/* ─── Theme ─── */
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true;
  prefersdark: false;
  color-scheme: light;

  /* Surfaces — warm gray with a hint of blue */
  --color-base-100: oklch(98.5% 0.004 260);
  --color-base-200: oklch(95% 0.008 260);
  --color-base-300: oklch(91% 0.015 260);
  --color-base-content: oklch(22% 0.025 260);

  /* Primary — Malio blue, slightly richer */
  --color-primary: oklch(40% 0.16 262);
  --color-primary-content: oklch(98% 0.005 262);

  /* Secondary — refined lavender */
  --color-secondary: oklch(72% 0.06 275);
  --color-secondary-content: oklch(22% 0.03 275);

  /* Accent — warm amber-orange */
  --color-accent: oklch(72% 0.17 55);
  --color-accent-content: oklch(20% 0.04 55);

  /* Neutral — deep slate */
  --color-neutral: oklch(28% 0.04 260);
  --color-neutral-content: oklch(95% 0.005 260);

  /* Semantic */
  --color-info: oklch(58% 0.14 255);
  --color-info-content: oklch(98% 0.005 255);
  --color-success: oklch(62% 0.19 150);
  --color-success-content: oklch(98% 0.005 150);
  --color-warning: oklch(78% 0.15 70);
  --color-warning-content: oklch(22% 0.05 70);
  --color-error: oklch(58% 0.22 25);
  --color-error-content: oklch(98% 0.005 25);

  /* Geometry */
  --radius-selector: 0.75rem;
  --radius-field: 0.375rem;
  --radius-box: 0.625rem;

  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  --border: 1px;
  --depth: 1;
  --noise: 0;
}

/* ─── Typography ─── */
:root {
  --font-heading: 'Outfit', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.stat-value,
.text-2xl,
.text-3xl,
.text-4xl {
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
}

/* ─── Density variables ─── */
:root {
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

.density-compact {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.25rem;
}

.density-comfortable {
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

.density-spacious {
  --spacing-xs: 0.75rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
}

/* ─── High contrast mode ─── */
.contrast-high .btn { @apply border-2; }
.contrast-high .input { @apply border-2; }
.contrast-high .select { @apply border-2; }
.contrast-high .textarea { @apply border-2; }
.contrast-high .modal-box { @apply border-2 border-base-content; }

/* ─── Accessibility ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

*:focus-visible {
  outline: 2px solid oklch(40% 0.16 262);
  outline-offset: 2px;
}

/* ─── Cards ─── */
.card {
  border: 1px solid oklch(91% 0.015 260 / 0.6);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow:
    0 4px 6px -1px oklch(22% 0.025 260 / 0.06),
    0 2px 4px -2px oklch(22% 0.025 260 / 0.04);
}

/* ─── Navbar glass effect ─── */
.navbar-glass {
  background: oklch(98.5% 0.004 260 / 0.82);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border-bottom: 1px solid oklch(91% 0.015 260 / 0.5);
}

/* ─── Buttons ─── */
.btn {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: all 0.15s ease;
}

.btn-circle {
  transition: all 0.2s ease-in-out;
}
.btn-circle:hover {
  transform: scale(1.05);
}
.btn-circle:active {
  transform: scale(0.95);
}

/* ─── Inputs ─── */
.input, .select, .textarea {
  font-family: var(--font-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input:focus, .select:focus, .textarea:focus {
  box-shadow: 0 0 0 3px oklch(40% 0.16 262 / 0.1);
}

/* ─── Tables ─── */
.table thead th {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: oklch(45% 0.03 260);
}

.table tbody tr {
  transition: background-color 0.1s ease;
}

/* ─── Badges ─── */
.badge {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0;
}

/* ─── Stats ─── */
.stat-title {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.6;
}

.stat-value {
  font-weight: 700;
}

/* ─── Modals ─── */
.modal {
  transition: opacity 0.25s ease;
}

.modal-box {
  font-family: var(--font-body);
  border-radius: 0.75rem;
  border: 1px solid oklch(91% 0.015 260 / 0.5);
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

.modal.modal-open .modal-box {
  animation: modalSlideUp 0.25s ease-out;
}

/* ─── Page transitions ─── */
.page-enter-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.page-leave-active {
  transition: opacity 0.15s ease;
}
.page-enter-from {
  opacity: 0;
  transform: translateY(4px);
}
.page-leave-to {
  opacity: 0;
}

/* ─── Scrollbar styling ─── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: oklch(75% 0.02 260);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: oklch(60% 0.03 260);
}

/* ─── Readability ─── */
.text-sm { line-height: 1.5; }
.text-xs { line-height: 1.4; }

/* ─── Adaptive spacing ─── */
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }

.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-md); }
.m-4 { margin: var(--spacing-lg); }
.m-5 { margin: var(--spacing-xl); }

.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }
.gap-5 { gap: var(--spacing-xl); }

@layer components {
  .form-control .label {
    @apply mb-2;
    padding-bottom: 0;
    margin-right: 15px;
  }
  .form-control .label + * {
    margin-top: var(--spacing-xs);
  }
}

@layer base {
  label + input,
  label + select,
  label + textarea,
  label + .input,
  label + .select,
  label + .textarea {
    margin-top: var(--spacing-xs);
  }
}