/* ============================================================
   PipeDev — Tokens do design system KodeHUB (área logada)
   Fonte: docs/design-system/ (retrato do `.kode-app` do kodehub-app).
   Nunca use cor literal em componente: sempre hsl(var(--token)).
   Escuro é o padrão (:root); o claro vive em theme.css, em
   html[data-theme="light"]. Cor é um trio HSL sem a função.
   ============================================================ */

:root {
  --background: 210 6% 7%;
  --foreground: 210 8% 97%;

  --card: 210 5% 11%;
  --card-foreground: 210 8% 97%;

  --popover: 210 5% 11%;
  --popover-foreground: 210 8% 97%;

  --primary: 204 12% 86%;
  --primary-foreground: 210 11% 8%;

  --secondary: 204 7% 19%;
  --secondary-foreground: 210 8% 97%;

  --muted: 204 7% 17%;
  --muted-foreground: 204 10% 70%;

  --accent: 204 7% 24%;
  --accent-foreground: 210 8% 97%;

  /* Estado: só para significar estado, nunca como cor de marca. */
  --success: 160 84% 45%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 55%;
  --warning-foreground: 0 0% 100%;
  --destructive: 0 72% 55%;
  --destructive-foreground: 0 0% 98%;
  --info: 199 89% 55%;
  --info-foreground: 0 0% 100%;

  --border: 204 7% 23%;
  --input: 204 7% 25%;
  --ring: 204 12% 76%;

  /* Barra lateral: escura nos dois temas. */
  --sidebar-background: 210 8% 5%;
  --sidebar-foreground: 210 8% 97%;
  --sidebar-primary: 204 12% 86%;
  --sidebar-primary-foreground: 210 11% 8%;
  --sidebar-accent: 204 7% 17%;
  --sidebar-accent-foreground: 210 8% 97%;
  --sidebar-border: 204 7% 20%;

  --chart-1: 204 12% 86%;
  --chart-2: 204 10% 65%;
  --chart-3: 204 8% 45%;

  --radius: 0.625rem;

  --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
  --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.4);
  --shadow-card: 0 1px 2px hsl(0 0% 0% / 0.35), 0 10px 28px hsl(0 0% 0% / 0.2);
  --shadow-card-hover: 0 14px 32px hsl(0 0% 0% / 0.4);
  --shadow-elevated: 0 18px 40px hsl(0 0% 0% / 0.45);

  --gradient-primary: linear-gradient(135deg, hsl(204 12% 86%) 0%, hsl(204 8% 58%) 55%, hsl(210 5% 28%) 100%);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Prioridades das tarefas (funcionais, não de marca) */
  --prio-baixa: 0 0% 45%;
  --prio-media: 210 40% 55%;
  --prio-alta: 32 80% 55%;
  --prio-urgente: 0 72% 55%;

  /* Estrutura */
  --sidebar-width: 206px;
  --shell-gap: 0.75rem;
  --topbar-height: 60px;
}

/* ── Reset ─────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

[hidden] { display: none !important; }

html, body { height: 100%; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; }

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

::selection {
  background: hsl(var(--primary) / 0.3);
  color: hsl(var(--foreground));
}

/* ── Scrollbar discreta ────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 9999px;
}

*::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.6); }

/* ── Animações base ────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-fade-in  { animation: fade-in 0.3s ease-out both; }
.animate-scale-in { animation: scale-in 0.2s ease-out both; }

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

/* ── Utilitários do design system ──────────────────────── */
.text-gradient {
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.beams {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, hsl(var(--primary) / 0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 120%, hsl(var(--primary) / 0.04), transparent 60%);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}