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

/* ── Module brand colors — use as text-module-*, bg-module-*, border-module-* */
@theme {
  --color-module-helpdesk:    #3b82f6;
  --color-module-helpdesk-bg: #eff6ff;
  --color-module-kb:          #059669;
  --color-module-kb-bg:       #ecfdf5;
  --color-module-chat:        #7c3aed;
  --color-module-chat-bg:     #f5f3ff;
  --color-module-kitty:       #d97706;
  --color-module-kitty-bg:    #fffbeb;
}

/* good - #da4b5f; */
/* ── Landing page palette — change here to retheme everything ─────────────── */
:root {
    --lp-bg-hero:    #f7f4f2;
    --lp-bg-section: #ede8e4;
    --lp-border:     #cfc8c2;
    --lp-heading:    #2c2420;
    --lp-body:       #5c504a;
    --lp-muted:      #9e9088;
    --lp-primary:    #c56736;
    --lp-primary-h:  #b06858;
    --lp-dark:       #2c2420;
    --lp-darkest:    #1a1410;
    --lp-dark-body:  #887870;

    /* Module brand colors — also in @theme for Tailwind utilities */
    --module-helpdesk:    #3b82f6;
    --module-helpdesk-bg: #eff6ff;
    --module-kb:          #059669;
    --module-kb-bg:       #ecfdf5;
    --module-chat:        #7c3aed;
    --module-chat-bg:     #f5f3ff;
    --module-kitty:       #d97706;
    --module-kitty-bg:    #fffbeb;
}
/* ── Hero flow panel — glass cards & connectors ──────────────────────────── */
.lp-glass {
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.75);
  border-radius: 1rem; padding: 1rem; position: relative; width: 100%;
}
.lp-glass::before {
  content: ''; position: absolute; left: 1rem; right: 1rem; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}
.lp-glass-hi {
  background: rgba(255,255,255,0.42) !important;
  border-color: rgba(255,255,255,0.72) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.09), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
.lp-connector {
  display: flex; flex-direction: column; align-items: center; height: 28px;
}
.lp-connector-line {
  width: 1px; flex: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--lp-primary) 55%, transparent),
    color-mix(in srgb, var(--lp-primary) 15%, transparent));
}
.lp-step-1 { animation: lp-flow-in 0.5s ease both 0.2s; }
.lp-step-2 { animation: lp-flow-in 0.5s ease both 0.8s; }
.lp-step-3 { animation: lp-flow-in 0.5s ease both 1.4s; }
.lp-step-4 { animation: lp-flow-in 0.5s ease both 2.0s, lp-success-glow 3s ease-in-out 3.5s infinite; }
.lp-conn-1  { animation: lp-flow-in 0.3s ease both 0.5s; }
.lp-conn-2  { animation: lp-flow-in 0.3s ease both 1.1s; }
.lp-conn-3  { animation: lp-flow-in 0.3s ease both 1.7s; }

/* ── Flow animation (hero right panel) ───────────────────────────────────── */
@keyframes lp-flow-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lp-flow-dot {
  0%   { transform: translateY(0);    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(36px); opacity: 0; }
}
@keyframes lp-bar-fill {
  from { width: 0 !important; }
}
@keyframes lp-connector-grow {
  from { transform: scaleY(0); transform-origin: top; }
  to   { transform: scaleY(1); transform-origin: top; }
}
@keyframes lp-success-glow {
  0%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.80); }
  50%       { box-shadow: 0 4px 32px rgba(201,168,76,0.25), inset 0 1px 0 rgba(255,255,255,0.90); }
}

/* Alpine.js — hide x-cloak elements until Alpine initialises */
[x-cloak] { display: none !important; }

/* ── Landing page animations ─────────────────────────────────────────────── */
@keyframes fade-up   { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }
@keyframes fade-in   { from { opacity: 0 } to { opacity: 1 } }
@keyframes float     { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes shimmer   { 0% { background-position: -200% center } 100% { background-position: 200% center } }
@keyframes blink     { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }

.animate-fade-up { animation: fade-up 0.7s ease both }
.animate-fade-in { animation: fade-in 0.6s ease both }
.animate-float   { animation: float 4s ease-in-out infinite }
.delay-100 { animation-delay: 0.10s }
.delay-200 { animation-delay: 0.20s }
.delay-300 { animation-delay: 0.30s }
.delay-400 { animation-delay: 0.40s }

.gradient-text {
  background: linear-gradient(135deg, #a78bfa 0%, #6366f1 40%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.shimmer-text {
  background: linear-gradient(90deg, #6366f1, #a78bfa, #38bdf8, #6366f1);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}
.dot-grid {
  background-image: radial-gradient(circle, rgba(99,102,241,0.15) 1px, transparent 1px);
  background-size: 28px 28px;
}
.card-glow:hover {
  box-shadow: 0 0 0 1px rgba(99,102,241,0.3), 0 20px 60px -10px rgba(99,102,241,0.2);
}
.step-line::before {
  content: '';
  position: absolute;
  top: 2rem;
  left: calc(50% + 2.5rem);
  width: calc(100% - 5rem);
  height: 1px;
  background: linear-gradient(90deg, #6366f1, #a78bfa);
  opacity: 0.3;
}
@media (max-width: 768px) { .step-line::before { display: none } }
@keyframes spin-slow { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
.animate-spin-slow { animation: spin-slow 14s linear infinite }

.typing-cursor {
  -webkit-text-fill-color: #a78bfa;
  color: #a78bfa;
  animation: blink 0.75s step-end infinite;
}

/* ── Content body (rendered markdown on dark backgrounds) ─────────────────── */
.content-body { color: #cbd5e1; line-height: 1.75; }
.content-body h1, .content-body h2, .content-body h3, .content-body h4 {
  color: #f1f5f9; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem;
}
.content-body h1 { font-size: 2rem; }
.content-body h2 { font-size: 1.5rem; }
.content-body h3 { font-size: 1.25rem; }
.content-body p  { margin-bottom: 1rem; }
.content-body a  { color: #818cf8; text-decoration: underline; }
.content-body a:hover { color: #a5b4fc; }
.content-body ul, .content-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.content-body ul { list-style-type: disc; }
.content-body ol { list-style-type: decimal; }
.content-body li { margin-bottom: 0.25rem; }
.content-body hr { border-color: rgba(255,255,255,0.1); margin: 2rem 0; }
.content-body code {
  background: rgba(255,255,255,0.05); color: #a5b4fc;
  padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.875em;
}
.content-body pre {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 1rem; overflow-x: auto; margin-bottom: 1rem;
}
.content-body pre code { background: none; padding: 0; }
.content-body strong { color: #f1f5f9; font-weight: 600; }
.content-body blockquote {
  border-left: 3px solid #6366f1; padding-left: 1rem;
  color: #94a3b8; margin: 1rem 0;
}