@import "tailwindcss";
@import "./styles/logs.css";
@import "./styles/cron.css";
@import "./styles/overview.css";

@theme {
  --font-sans: 'JetBrains Mono', 'Outfit', ui-monospace, monospace;
  --font-heading: 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ───── Dark (default): terminal ───── */
  --color-bg: #0a0a0c;
  --color-bg-1: #131316;
  --color-bg-2: #1c1c20;
  --color-bg-3: #262629;
  --color-bg-hover: #2e2e33;

  --color-foreground: #b0b0b8;
  --color-muted: #707078;
  --color-faint: #454550;
  --color-strong: #e8e8ec;

  --color-accent: #a78bfa;
  --color-accent-hover: #c4b5fd;
  --color-accent-subtle: rgba(167, 139, 250, 0.10);

  --color-cyan: #2dd4bf;
  --color-cyan-subtle: rgba(45, 212, 191, 0.10);
  --color-pink: #f472b6;
  --color-pink-subtle: rgba(244, 114, 182, 0.10);

  --color-success: #2dd4bf;
  --color-success-subtle: rgba(45, 212, 191, 0.10);
  --color-danger: #f87171;
  --color-danger-subtle: rgba(248, 113, 113, 0.10);
  --color-warning: #fbbf24;
  --color-warning-subtle: rgba(251, 191, 36, 0.10);
  --color-info: #94a3b8;
  --color-purple: #c084fc;

  --color-border: #1e1e24;
  --color-border-2: #2a2a32;
  --color-border-hover: #3e3e4a;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
}

/* ───── Light mode ───── */
html[data-theme="light"] {
  --color-bg: #f5f5f5;
  --color-bg-1: #ffffff;
  --color-bg-2: #ebebeb;
  --color-bg-3: #d6d6d6;
  --color-bg-hover: #cccccc;

  --color-foreground: #333338;
  --color-muted: #666670;
  --color-faint: #999aa0;
  --color-strong: #0a0a0c;

  --color-accent: #7c3aed;
  --color-accent-hover: #6d28d9;
  --color-accent-subtle: rgba(124, 58, 237, 0.08);

  --color-cyan: #0d9488;
  --color-cyan-subtle: rgba(13, 148, 136, 0.06);
  --color-pink: #db2777;
  --color-pink-subtle: rgba(219, 39, 119, 0.06);

  --color-success: #0d9488;
  --color-success-subtle: rgba(13, 148, 136, 0.06);
  --color-danger: #dc2626;
  --color-danger-subtle: rgba(220, 38, 38, 0.06);
  --color-warning: #d97706;
  --color-warning-subtle: rgba(217, 119, 6, 0.06);

  --color-border: #e0e0e0;
  --color-border-2: #cccccc;
  --color-border-hover: #aaaaaa;
}

/* ───── Keyframes ───── */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes agCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes agFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes agSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes agPanelIn {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes agSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes menuDrop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}
