/* ============================================================
   Leaven · Sacmi AI Ticket Dispatcher — global styles
   Tailwind (Play CDN) handles utilities; this file holds tokens,
   base resets, keyframes for the 5 beat animations, scrollbars.
   ============================================================ */

:root {
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* brand */
  --brand-teal: #21B4C7;
  --brand-blue: #1B5887;
  --brand-gradient: linear-gradient(135deg, #21B4C7 0%, #1B5887 100%);

  /* neutrals (light) */
  --bg-body: #F5F7F8;
  --bg-card: #FFFFFF;
  --bg-section: #E8ECEF;
  --border: #CFD6DA;
  --text-strong: #11202A;
  --text-body: #3F4A53;
  --text-muted: #6B7780;

  /* semantic */
  --success: #16A34A; --success-soft: #DCFCE7;
  --warning: #D97706; --warning-soft: #FEF3C7;
  --danger:  #DC2626; --danger-soft:  #FEE2E2;
  --info:    #0EA5E9; --info-soft:    #E0F2FE;
}

.dark {
  --bg-body: #0B1418;
  --bg-card: #11202A;
  --bg-section: #16242E;
  --border: #25333D;
  --text-strong: #EAF0F2;
  --text-body: #C2CCD2;
  --text-muted: #8A97A0;
  --success-soft: #0c2a1a;
  --warning-soft: #2c2208;
  --danger-soft:  #2c1212;
  --info-soft:    #07212e;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display { font-family: var(--font-display); }
.tnum { font-variant-numeric: tabular-nums; }

/* brand helpers ------------------------------------------------ */
.brand-gradient { background-image: var(--brand-gradient); }
.brand-text {
  background-image: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.brand-ring { box-shadow: 0 0 0 1px rgba(33,180,199,.35); }

/* scrollbar ---------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 35%, transparent);
  border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 55%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* base transitions (restrained, 150-200ms) -------------------- */
.t-base { transition: background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out, box-shadow .16s ease-out, transform .16s ease-out; }

/* ===== Beat animations =======================================
   Pattern: the VISIBLE end-state is the base style. Motion is
   layered ONLY under prefers-reduced-motion: no-preference, so
   content is never hidden in reduced-motion / capture contexts. */

/* Beat 3 — typewriter cursor (glow) */
@keyframes caretBlink { 0%,45%{opacity:1} 50%,95%{opacity:.15} 100%{opacity:1} }
.caret {
  display:inline-block; width:2px; height:1.05em; vertical-align:-0.18em;
  margin-left:1px; border-radius:2px;
  background: var(--brand-teal);
  box-shadow: 0 0 7px rgba(33,180,199,.9), 0 0 2px rgba(33,180,199,.9);
}

/* Beat 2 — sparkle burst on cache match */
@keyframes sparklePop {
  0% { transform: scale(.2) rotate(0deg); opacity: 0; }
  35% { transform: scale(1.15) rotate(25deg); opacity: 1; }
  100% { transform: scale(.6) rotate(45deg); opacity: 0; }
}
.sparkle { opacity: 0; }

/* Beat 2 — cost ledger green flash */
@keyframes ledgerFlash {
  0% { background-color: transparent; }
  20% { background-color: color-mix(in srgb, var(--success) 22%, transparent); }
  100% { background-color: transparent; }
}

/* Beat 4 — anomaly soft red breathing */
@keyframes anomalyBreathe {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.0); border-color: rgba(220,38,38,.55); }
  50% { box-shadow: 0 0 0 4px rgba(220,38,38,.12); border-color: rgba(220,38,38,.95); }
}
@keyframes cellBreathe {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.0); }
  50% { box-shadow: 0 0 0 3px rgba(220,38,38,.30); }
}
.cell-pulse { outline: 2px solid var(--danger); }

/* Beat 5 — chart compose-in (base = final visible state) */
@keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes drawLine { from { stroke-dashoffset: var(--dash); } to { stroke-dashoffset: 0; } }
@keyframes fadeRise { from { transform: translateY(8px);} to { transform:none;} }
@keyframes sectionIn { from { transform: translateY(6px);} to { transform:none;} }
@keyframes shimmer { 0%{background-position: -200% 0} 100%{background-position: 200% 0} }
@keyframes toastIn { from { opacity:0; transform: translateY(10px) scale(.98);} to {opacity:1; transform:none;} }
@keyframes cardOut { to { opacity:0; transform: translateX(18px); height:0; margin:0; padding-top:0; padding-bottom:0; } }
@keyframes drawerIn { from { transform: translateX(100%);} to {transform:none;} }
@keyframes overlayIn { from { opacity:0 } to { opacity:1 } }

.compose-bar { transform-origin: bottom; }
.skeleton {
  background: linear-gradient(90deg, var(--bg-section) 25%, color-mix(in srgb, var(--bg-section) 60%, var(--bg-card)) 37%, var(--bg-section) 63%);
  background-size: 200% 100%; border-radius: 6px;
}
.card-out { animation: cardOut .3s ease-in forwards; overflow:hidden; }

/* ===== Lifecycle state pills (8 states · light + dark) ===== */
.state-pill { display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px;
  border-radius:999px; font-size:12px; font-weight:600; line-height:1; white-space:nowrap; }
.state-pill svg { width:12px; height:12px; }
.st-new           { background:#F1F3F5; color:#3F4A53; }
.st-ai_queued     { background:#E3F7FA; color:#0E7C8B; }
.st-ai_dispatched { background:#E5EEF6; color:#1B5887; }
.st-in_progress   { background:#FCEFCF; color:#B45309; }
.st-awaiting_user { background:#E1F1FC; color:#0369A1; }
.st-escalated     { background:#FCE8D6; color:#C2410C; }
.st-resolved      { background:#D7F4E3; color:#047857; }
.st-closed        { background:#E6E9EB; color:#5A6770; }
.dark .st-new           { background:#1C2933; color:#C2CCD2; }
.dark .st-ai_queued     { background:#07303A; color:#54CFE0; }
.dark .st-ai_dispatched { background:#0C2740; color:#71A8DC; }
.dark .st-in_progress   { background:#2C2208; color:#FBBF24; }
.dark .st-awaiting_user { background:#08222F; color:#56C0F4; }
.dark .st-escalated     { background:#2A1808; color:#FB923C; }
.dark .st-resolved      { background:#0B2C1B; color:#34D399; }
.dark .st-closed        { background:#1A2228; color:#9CA8B1; }

/* ambient pipeline — pulsing dot + row slide */
@keyframes pulseDot { 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.55); opacity:.45 } }
.pulse-dot { display:inline-block; width:8px; height:8px; border-radius:999px; background:var(--brand-teal); }
@keyframes rowSlideOut { 0%{ } 100%{ transform:translateX(28px); opacity:0; } }
@keyframes rowFlash { 0%{ background-color:color-mix(in srgb,var(--brand-teal) 16%, transparent);} 100%{ background-color:transparent; } }
.row-flash { animation: rowFlash 1.6s ease-out; }
@keyframes pillTick { 0%{ transform:translateY(-3px); opacity:.4 } 100%{ transform:none; opacity:1 } }

@media (prefers-reduced-motion: no-preference) {
  .pulse-dot { animation: pulseDot 1.6s ease-in-out infinite; }
  .row-slide-out { animation: rowSlideOut .6s cubic-bezier(.5,0,.75,0) forwards; }
  .pill-tick { animation: pillTick .35s ease-out; }
}

@media (prefers-reduced-motion: no-preference) {
  .caret { animation: caretBlink 1s steps(1) infinite; }
  .sparkle { animation: sparklePop .8s ease-out forwards; }
  .ledger-flash { animation: ledgerFlash .9s ease-out; }
  .anomaly-pulse { animation: anomalyBreathe 2.4s ease-in-out infinite; }
  .cell-pulse { animation: cellBreathe 2.2s ease-in-out infinite; }
  .compose-bar { animation: growUp .7s cubic-bezier(.22,1,.36,1) both; }
  .compose-fade { animation: fadeRise .5s ease-out both; }
  .draw-line { stroke-dashoffset: var(--dash); animation: drawLine .9s ease-out .3s forwards; }
  .section-in { animation: sectionIn .3s ease-out both; }
  .skeleton { animation: shimmer 1.4s ease-in-out infinite; }
  .toast-in { animation: toastIn .2s ease-out both; }
  .drawer-in { animation: drawerIn .24s cubic-bezier(.22,1,.36,1) both; }
  .overlay-in { animation: overlayIn .2s ease-out both; }
}

/* focus ring */
:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; border-radius: 4px; }

/* selection */
::selection { background: rgba(33,180,199,.22); }