@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================================
   ACCENT PRESETS
   Applied via data-accent="<key>" on <html>
   ============================================================ */

/* Default / Schaeffler Green */
:root,
[data-accent="green"] {
  --color-accent: #00893d;
  --color-accent-hover: #006e31;
  --color-accent-light: #e6f4ec;
  --color-accent-text: #ffffff;
}

[data-accent="blue"] {
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-light: #dbeafe;
  --color-accent-text: #ffffff;
}

[data-accent="purple"] {
  --color-accent: #7c3aed;
  --color-accent-hover: #6d28d9;
  --color-accent-light: #ede9fe;
  --color-accent-text: #ffffff;
}

[data-accent="amber"] {
  --color-accent: #d97706;
  --color-accent-hover: #b45309;
  --color-accent-light: #fef3c7;
  --color-accent-text: #ffffff;
}

[data-accent="teal"] {
  --color-accent: #0d9488;
  --color-accent-hover: #0f766e;
  --color-accent-light: #ccfbf1;
  --color-accent-text: #ffffff;
}

/* ============================================================
   LIGHT THEME  (default)
   ============================================================ */
:root {
  /* Surfaces */
  --color-bg-app: #f9fafb;
  --color-bg-surface: #ffffff;
  --color-bg-surface-hover: #f9fafb;
  --color-bg-muted: #f3f4f6;

  /* Text */
  --color-text: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #9ca3af;
  --color-text-inverse: #ffffff;

  /* Borders */
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;

  /* Status — Success */
  --color-status-success-bg: #dcfce7;
  --color-status-success-text: #166534;

  /* Status — Warning */
  --color-status-warning-bg: #fef9c3;
  --color-status-warning-text: #854d0e;

  /* Status — Error */
  --color-status-error-bg: #fee2e2;
  --color-status-error-text: #991b1b;

  /* Status — Info */
  --color-status-info-bg: #dbeafe;
  --color-status-info-text: #1e40af;
}

/* ============================================================
   DARK THEME
   Applied via .dark class on <html>
   ============================================================ */
:root.dark {
  /* Surfaces */
  --color-bg-app: #0f172a;
  --color-bg-surface: #1e293b;
  --color-bg-surface-hover: #334155;
  --color-bg-muted: #1e293b;

  /* Text */
  --color-text: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  /* Borders */
  --color-border: #334155;
  --color-border-light: #1e293b;

  /* Status — Success */
  --color-status-success-bg: rgba(34, 197, 94, 0.15);
  --color-status-success-text: #4ade80;

  /* Status — Warning */
  --color-status-warning-bg: rgba(234, 179, 8, 0.15);
  --color-status-warning-text: #facc15;

  /* Status — Error */
  --color-status-error-bg: rgba(239, 68, 68, 0.15);
  --color-status-error-text: #f87171;

  /* Status — Info */
  --color-status-info-bg: rgba(59, 130, 246, 0.15);
  --color-status-info-text: #60a5fa;
}

/* Dark accent-light overrides (rgba instead of solid pastel) */
:root.dark,
:root.dark [data-accent="green"] {
  --color-accent-light: rgba(0, 137, 61, 0.15);
}
:root.dark [data-accent="blue"] {
  --color-accent-light: rgba(37, 99, 235, 0.15);
}
:root.dark [data-accent="purple"] {
  --color-accent-light: rgba(124, 58, 237, 0.15);
}
:root.dark [data-accent="amber"] {
  --color-accent-light: rgba(217, 119, 6, 0.15);
}
:root.dark [data-accent="teal"] {
  --color-accent-light: rgba(13, 148, 136, 0.15);
}

/* ============================================================
   BASE LAYER
   ============================================================ */
@layer base {
  body {
    @apply antialiased;
    background-color: var(--color-bg-app);
    color: var(--color-text);
    transition: background-color 200ms ease, color 200ms ease;
  }

  /* Native color scheme for form controls */
  :root {
    color-scheme: light;
  }
  :root.dark {
    color-scheme: dark;
  }

  /* Checkbox / radio accent color */
  input[type="checkbox"],
  input[type="radio"] {
    accent-color: var(--color-accent);
  }
}

/* ============================================================
   COMPONENT CLASSES
   ============================================================ */
@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-md font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply btn;
    background-color: var(--color-accent);
    color: var(--color-accent-text);
    --tw-ring-color: var(--color-accent);
  }
  .btn-primary:hover:not(:disabled) {
    background-color: var(--color-accent-hover);
  }
  .btn-secondary {
    @apply btn border;
    background-color: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    --tw-ring-color: var(--color-accent);
  }
  .btn-secondary:hover:not(:disabled) {
    background-color: var(--color-bg-surface-hover);
  }
  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
  }

  /* Cards */
  .card {
    @apply rounded-lg border shadow-sm;
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  .badge-green {
    @apply badge;
    background-color: var(--color-status-success-bg);
    color: var(--color-status-success-text);
  }
  .badge-yellow {
    @apply badge;
    background-color: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
  }
  .badge-red {
    @apply badge;
    background-color: var(--color-status-error-bg);
    color: var(--color-status-error-text);
  }
  .badge-blue {
    @apply badge;
    background-color: var(--color-status-info-bg);
    color: var(--color-status-info-text);
  }
  .badge-gray {
    @apply badge;
    background-color: var(--color-bg-muted);
    color: var(--color-text-secondary);
  }

  /* Input base — replaces repeated inline input patterns */
  .input-base {
    @apply w-full px-3 py-2 rounded-md text-sm border focus:outline-none focus:ring-2 transition-colors;
    background-color: var(--color-bg-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    --tw-ring-color: var(--color-accent);
  }
  .input-base::placeholder {
    color: var(--color-text-muted);
  }
  .input-base:focus {
    border-color: var(--color-accent);
  }

  /* Small input variant (used in admin tables) */
  .input-sm {
    @apply px-2 py-1 rounded text-sm border focus:outline-none focus:ring-1 transition-colors;
    background-color: var(--color-bg-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    --tw-ring-color: var(--color-accent);
  }
  .input-sm:focus {
    border-color: var(--color-accent);
  }
}
