/* ============================================================
   DachOS Design System — v2 (redesign 2026-07)
   "Ledger de operador editorial": neutro sage, evergreen como
   único acento, semânticos separados, serifada humanista nos
   números-herói. Tokens --d-* mantidos com os mesmos NOMES pra
   preservar as classes das páginas legadas — só o VALOR muda.
   ============================================================ */

/* ---- Tokens globais — DARK (default) ---- */
:root,
:root[data-theme="dark"],
.dachos[data-theme="dark"] {
  /* Neutros — sage-bias, não cinza puro */
  --d-ink-0: #080B09;
  --d-ink-1: #0E1210;
  --d-ink-2: #131715;
  --d-ink-3: #171B18;
  --d-ink-4: #1E231F;
  --d-ink-5: #262B26;

  /* Foreground — hierarquia de texto */
  --d-fg-0: #ECEDE8;
  --d-fg-1: #C9CBC4;
  --d-fg-2: #98988F;
  --d-fg-3: #6B6E66;
  --d-fg-4: #4A4D46;

  /* Bordas — mais definidas, menos "vidro fumê" */
  --d-border-subtle:  rgba(255, 255, 255, 0.06);
  --d-border-default: #262B26;
  --d-border-strong:  #363B36;
  --d-border-neon:    rgba(76, 183, 153, 0.40);

  /* Acento único: evergreen. Slots antigos apontam pra evergreen
     ou pra suas contrapartes semânticas quietas. */
  --d-neon-green:       #4CB799;   /* accent + money-positive */
  --d-neon-green-dim:   #3E9E83;
  --d-neon-green-glow:  rgba(76, 183, 153, 0.30);

  --d-neon-cyan:        #4CB799;   /* re-aponta pra evergreen (mesmo acento) */
  --d-neon-cyan-dim:    #3E9E83;
  --d-neon-cyan-glow:   rgba(76, 183, 153, 0.30);

  --d-neon-magenta:      #E06663;   /* erro/negativo — vermelho quieto */
  --d-neon-magenta-dim:  #B8524F;
  --d-neon-magenta-glow: rgba(224, 102, 99, 0.25);

  --d-neon-amber:      #D69946;
  --d-neon-amber-dim:  #B57E33;
  --d-neon-amber-glow: rgba(214, 153, 70, 0.25);

  --d-neon-violet:      #B49AE0;
  --d-neon-violet-glow: rgba(180, 154, 224, 0.22);

  /* Status */
  --d-status-queued:    #6B6E66;
  --d-status-running:   #4CB799;
  --d-status-success:   #4CB799;
  --d-status-failed:    #E06663;
  --d-status-timeout:   #D69946;
  --d-status-cancelled: #6B6E66;

  /* Money */
  --d-money-positive: #4CB799;
  --d-money-negative: #E06663;
  --d-money-neutral:  #C9CBC4;

  /* Glass — mais transparente, menos saturado */
  --d-glass-1: rgba(19, 23, 21, 0.72);
  --d-glass-2: rgba(23, 27, 24, 0.82);
  --d-glass-3: rgba(30, 35, 31, 0.90);
  --d-glass-border: rgba(255, 255, 255, 0.06);
  --d-glass-blur: saturate(130%) blur(14px);

  /* Sombras — mais editoriais, menos "AAA gaming" */
  --d-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.30);
  --d-shadow-md: 0 1px 0 rgba(0, 0, 0, 0.40), 0 6px 20px rgba(0, 0, 0, 0.42);
  --d-shadow-lg: 0 1px 0 rgba(0, 0, 0, 0.45), 0 18px 50px rgba(0, 0, 0, 0.50);
  --d-shadow-xl: 0 1px 0 rgba(0, 0, 0, 0.50), 0 32px 80px rgba(0, 0, 0, 0.60);

  --d-glow-green:   0 0 0 1px rgba(76, 183, 153, 0.28), 0 0 22px rgba(76, 183, 153, 0.18);
  --d-glow-magenta: 0 0 0 1px rgba(224, 102, 99, 0.28), 0 0 22px rgba(224, 102, 99, 0.16);
  --d-glow-amber:   0 0 0 1px rgba(214, 153, 70, 0.28), 0 0 22px rgba(214, 153, 70, 0.16);
  --d-glow-cyan:    0 0 0 1px rgba(76, 183, 153, 0.28), 0 0 22px rgba(76, 183, 153, 0.16);

  --d-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --d-inset-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* Gradiente + textura — apenas um leve vinheting sage-evergreen, sem noise */
  --d-gradient-vignette: radial-gradient(ellipse at 50% -20%, rgba(76,183,153,0.05) 0%, transparent 60%),
                         var(--d-ink-1);

  --d-texture-grid: none;

  /* Fontes — Inter (UI/body), Source Serif 4 (display/hero), JetBrains Mono (tabular) */
  --d-font-display: 'Source Serif 4', 'Source Serif Pro', 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --d-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  --d-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
  --d-font-jp:      var(--d-font-body); /* katakana desativada — token mantido pra não quebrar seletores */

  /* Escala tipográfica */
  --d-fs-display: 44px;
  --d-fs-h1:      32px;
  --d-fs-h2:      22px;
  --d-fs-h3:      17px;
  --d-fs-h4:      15px;
  --d-fs-body:    14px;
  --d-fs-body-sm: 13px;
  --d-fs-caption: 12px;
  --d-fs-micro:   11px;
  --d-fs-nano:    10px;
  --d-fs-data-lg: 36px;
  --d-fs-data:    14px;
  --d-fs-data-sm: 12px;

  /* Spacing / Radii / Motion */
  --d-space-1:  4px;
  --d-space-2:  8px;
  --d-space-3:  12px;
  --d-space-4:  16px;
  --d-space-5:  20px;
  --d-space-6:  24px;
  --d-space-7:  32px;
  --d-space-8:  40px;
  --d-space-9:  48px;
  --d-space-10: 64px;
  --d-space-11: 80px;
  --d-space-12: 96px;

  --d-radius-sm:  4px;
  --d-radius-md:  8px;
  --d-radius-lg:  12px;
  --d-radius-xl:  16px;
  --d-radius-2xl: 20px;
  --d-radius-full: 9999px;

  --d-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --d-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --d-dur-instant: 80ms;
  --d-dur-fast:    160ms;
  --d-dur-normal:  220ms;
  --d-dur-slow:    360ms;

  --d-ff-tabular: "tnum" 1, "lnum" 1, "zero" 1;
}

/* ============================================================
   Paleta LIGHT
   Neutros: paper com viés sage sutil, superfície branca pura,
   acento evergreen escuro para contraste AAA.
   ============================================================ */
:root[data-theme="light"],
.dachos[data-theme="light"] {
  /* Neutros — inverte, com viés sage */
  --d-ink-0: #ffffff;
  --d-ink-1: #F3F4F0;
  --d-ink-2: #FAFAF6;
  --d-ink-3: #FFFFFF;
  --d-ink-4: #ECEEE7;
  --d-ink-5: #DFE1D8;

  /* Foreground */
  --d-fg-0: #141614;
  --d-fg-1: #3F413D;
  --d-fg-2: #5F625B;
  --d-fg-3: #8A8D84;
  --d-fg-4: #B0B3AA;

  /* Bordas */
  --d-border-subtle:  rgba(20, 22, 20, 0.05);
  --d-border-default: #DFE1D8;
  --d-border-strong:  #C9CCC1;
  --d-border-neon:    rgba(11, 94, 74, 0.40);

  /* Acento — Evergreen escuro pra bg claro */
  --d-neon-green:       #0B5E4A;
  --d-neon-green-dim:   #094C3B;
  --d-neon-green-glow:  rgba(11, 94, 74, 0.22);

  --d-neon-cyan:        #0B5E4A;
  --d-neon-cyan-dim:    #094C3B;
  --d-neon-cyan-glow:   rgba(11, 94, 74, 0.22);

  --d-neon-magenta:      #B22A2A;
  --d-neon-magenta-dim:  #8F1E1E;
  --d-neon-magenta-glow: rgba(178, 42, 42, 0.22);

  --d-neon-amber:      #B0721F;
  --d-neon-amber-dim:  #8F5B14;
  --d-neon-amber-glow: rgba(176, 114, 31, 0.22);

  --d-neon-violet:      #6E4CB0;
  --d-neon-violet-glow: rgba(110, 76, 176, 0.20);

  --d-status-queued:    #8A8D84;
  --d-status-running:   #0B5E4A;
  --d-status-success:   #0B5E4A;
  --d-status-failed:    #B22A2A;
  --d-status-timeout:   #B0721F;
  --d-status-cancelled: #8A8D84;

  --d-money-positive: #0B5E4A;
  --d-money-negative: #B22A2A;
  --d-money-neutral:  #3F413D;

  --d-glass-1: rgba(255, 255, 255, 0.75);
  --d-glass-2: rgba(250, 250, 246, 0.86);
  --d-glass-3: rgba(243, 244, 240, 0.92);
  --d-glass-border: rgba(20, 22, 20, 0.05);

  --d-shadow-sm:   0 1px 0 rgba(20, 22, 20, 0.04), 0 1px 2px rgba(20, 22, 20, 0.04);
  --d-shadow-md:   0 1px 0 rgba(20, 22, 20, 0.05), 0 4px 14px rgba(20, 22, 20, 0.06);
  --d-shadow-lg:   0 1px 0 rgba(20, 22, 20, 0.06), 0 14px 40px rgba(20, 22, 20, 0.08);
  --d-shadow-xl:   0 1px 0 rgba(20, 22, 20, 0.08), 0 22px 60px rgba(20, 22, 20, 0.12);

  --d-glow-green:   0 0 0 1px rgba(11, 94, 74, 0.20), 0 0 22px rgba(11, 94, 74, 0.14);
  --d-glow-magenta: 0 0 0 1px rgba(178, 42, 42, 0.20), 0 0 22px rgba(178, 42, 42, 0.14);
  --d-glow-amber:   0 0 0 1px rgba(176, 114, 31, 0.20), 0 0 22px rgba(176, 114, 31, 0.14);
  --d-glow-cyan:    0 0 0 1px rgba(11, 94, 74, 0.20), 0 0 22px rgba(11, 94, 74, 0.14);

  --d-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.90);
  --d-inset-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 1);

  --d-gradient-vignette: radial-gradient(ellipse at 50% -20%, rgba(11, 94, 74, 0.04) 0%, transparent 60%),
                         var(--d-ink-1);

  --d-texture-grid: none;
}

/* ============================================================
   Re-alias de tokens legados → tokens novos
   Faz com que classes de base.css / components.css / *.js
   com var(--accent), var(--bg-primary), etc. resolvam para o
   sistema DachOS quando dentro de .dachos wrapper.
   ============================================================ */
.dachos {
  --bg-primary:   var(--d-ink-1);
  --bg-secondary: var(--d-ink-2);
  --bg-tertiary:  var(--d-ink-3);
  --bg-input:     var(--d-ink-2);
  --bg-hover:     var(--d-ink-3);
  --bg-active:    var(--d-ink-4);

  --text-primary:   var(--d-fg-0);
  --text-secondary: var(--d-fg-1);
  --text-muted:     var(--d-fg-3);
  --text-link:      var(--d-neon-green);

  --border:         var(--d-border-default);
  --border-light:   var(--d-border-subtle);
  --border-focus:   var(--d-neon-green);

  --accent:         var(--d-neon-green);
  --accent-hover:   var(--d-neon-green-dim);
  --accent-subtle:  rgba(76, 183, 153, 0.14);

  --success:      var(--d-status-success);
  --success-bg:   rgba(76, 183, 153, 0.14);
  --warning:      var(--d-neon-amber);
  --warning-bg:   rgba(214, 153, 70, 0.14);
  --error:        var(--d-neon-magenta);
  --error-bg:     rgba(224, 102, 99, 0.14);
  --running:      var(--d-neon-green);
  --running-bg:   rgba(76, 183, 153, 0.14);
  --purple:       var(--d-neon-violet);
  --purple-bg:    rgba(180, 154, 224, 0.14);

  --execute:        var(--d-neon-green);
  --execute-hover:  var(--d-neon-green-dim);
  --execute-border: var(--d-neon-green);
  --execute-glow:   rgba(76, 183, 153, 0.30);

  --shadow-sm: var(--d-shadow-sm);
  --shadow-md: var(--d-shadow-md);
  --shadow-lg: var(--d-shadow-lg);
  --shadow-xl: var(--d-shadow-xl);

  --font-ui:    var(--d-font-body);
  --font-serif: var(--d-font-display);
  --font-mono:  var(--d-font-mono);
}

/* ============================================================
   Wrapper — mais respiração, sem textura de grid
   ============================================================ */
.dachos {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-body);
  color: var(--d-fg-0);
  background: var(--d-ink-1);
  background-image: none;
  border: none;
  border-radius: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Katakana JP: DESATIVADA na nova identidade
   Todos os spans marcados como .jp / .dachos-jp-accent somem.
   ============================================================ */
.jp,
.dachos-jp-accent,
.app-header .nav-group-btn .jp {
  display: none !important;
}

/* ============================================================
   Typography primitives
   ============================================================ */
.dachos .dachos-label {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--d-fg-2);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.dachos .dachos-mono {
  font-family: var(--d-font-mono);
  font-feature-settings: var(--d-ff-tabular);
}

/* Utilitário: número herói serifado */
.dachos .dachos-serif,
.dachos-serif {
  font-family: var(--d-font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Page head */
.dachos .dachos-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--d-space-4);
  margin: 0 0 var(--d-space-6);
  padding-bottom: var(--d-space-5);
  border-bottom: 1px solid var(--d-border-subtle);
}

.dachos .dachos-page-head .head-left { display: flex; flex-direction: column; gap: 6px; }
.dachos .dachos-page-head .head-right { display: flex; align-items: center; gap: 8px; }

.dachos .dachos-page-head h1 {
  font-family: var(--d-font-display);
  font-size: var(--d-fs-h1);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--d-fg-0);
  margin: 0;
}

.dachos .dachos-page-sub {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-caption);
  color: var(--d-fg-2);
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================================
   Botões
   ============================================================ */
.dachos .dachos-btn {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-body-sm);
  font-weight: 500;
  border-radius: var(--d-radius-md);
  padding: 8px 14px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  letter-spacing: 0;
  transition: background var(--d-dur-fast) var(--d-ease-out),
              color var(--d-dur-fast) var(--d-ease-out),
              filter var(--d-dur-fast) var(--d-ease-out),
              transform var(--d-dur-instant) var(--d-ease-out);
}
.dachos .dachos-btn:active { transform: scale(0.98); }

.dachos .dachos-btn-primary {
  background: var(--d-neon-green);
  color: #FFFFFF;
  border-color: var(--d-neon-green);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.dachos .dachos-btn-primary:hover { background: var(--d-neon-green-dim); border-color: var(--d-neon-green-dim); }

.dachos .dachos-btn-secondary {
  background: var(--d-ink-3);
  color: var(--d-fg-0);
  border-color: var(--d-border-default);
}
.dachos .dachos-btn-secondary:hover { background: var(--d-ink-4); }

.dachos .dachos-btn-ghost {
  background: transparent;
  color: var(--d-fg-1);
  border: 1px solid transparent;
}
.dachos .dachos-btn-ghost:hover { background: var(--d-ink-3); color: var(--d-fg-0); }

.dachos .dachos-btn-sm { padding: 5px 10px; font-size: var(--d-fs-caption); }
.dachos .dachos-btn-icon { padding: 0; width: 32px; height: 32px; justify-content: center; }

/* ============================================================
   Cards
   ============================================================ */
.dachos .dachos-card {
  background: var(--d-ink-3);
  border: 1px solid var(--d-border-default);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--d-shadow-sm);
  padding: var(--d-space-5);
}
.dachos .dachos-card.pad-lg { padding: var(--d-space-6); }

/* ============================================================
   KPI — número herói agora serifado
   ============================================================ */
.dachos .dachos-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dachos .dachos-kpi .label-k {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-micro);
  color: var(--d-fg-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dachos .dachos-kpi .val {
  font-family: var(--d-font-display);
  font-size: var(--d-fs-data-lg);
  font-weight: 500;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 2px;
  color: var(--d-fg-0);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dachos .dachos-kpi .delta {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-micro);
  font-weight: 600;
  min-height: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dachos .dachos-kpi .delta.pos { color: var(--d-neon-green); }
.dachos .dachos-kpi .delta.neg { color: var(--d-neon-magenta); }

/* ============================================================
   Badges / pills
   ============================================================ */
.dachos .dachos-b {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-nano);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.dachos .dachos-b .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.dachos .b-queued    { background: rgba(107, 110, 102, 0.15); color: var(--d-fg-2); }
.dachos .b-running   { background: rgba(76, 183, 153, 0.14); color: var(--d-neon-green); }
.dachos .b-running .dot { animation: d-pulse 1.6s ease-in-out infinite; }
.dachos .b-success   { background: rgba(76, 183, 153, 0.14); color: var(--d-neon-green); }
.dachos .b-failed    { background: rgba(224, 102, 99, 0.14); color: var(--d-neon-magenta); }
.dachos .b-timeout   { background: rgba(214, 153, 70, 0.14); color: var(--d-neon-amber); }
.dachos .b-cancelled { background: rgba(107, 110, 102, 0.10); color: var(--d-fg-3); }
.dachos .b-tag       { background: var(--d-ink-4); color: var(--d-fg-1); text-transform: lowercase; letter-spacing: 0; }

@keyframes d-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
   Tabela — sem zebra, régua fina, tabular-nums default
   ============================================================ */
.dachos .dachos-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--d-font-body);
  font-feature-settings: var(--d-ff-tabular);
}
.dachos .dachos-tbl th,
.dachos .dachos-tbl td {
  padding: 12px 16px;
  font-size: var(--d-fs-body-sm);
  text-align: left;
  border-bottom: 1px solid var(--d-border-subtle);
  white-space: nowrap;
}
.dachos .dachos-tbl th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--d-fg-3);
  font-weight: 600;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  user-select: none;
  background: var(--d-ink-2);
}
.dachos .dachos-tbl th:hover { color: var(--d-fg-1); }
.dachos .dachos-tbl td.num { text-align: right; color: var(--d-fg-0); font-family: var(--d-font-mono); }
.dachos .dachos-tbl td.dim { color: var(--d-fg-2); }
.dachos .dachos-tbl tbody tr:hover td { background: var(--d-ink-2); }

/* ============================================================
   Inputs
   ============================================================ */
.dachos .dachos-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dachos .dachos-field label {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-micro);
  color: var(--d-fg-2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.dachos .dachos-inp {
  font-family: var(--d-font-body);
  font-size: var(--d-fs-body-sm);
  background: var(--d-ink-2);
  border: 1px solid var(--d-border-default);
  border-radius: var(--d-radius-md);
  padding: 9px 12px;
  color: var(--d-fg-0);
  outline: none;
  transition: border-color var(--d-dur-fast), box-shadow var(--d-dur-fast);
}
.dachos .dachos-inp.mono { font-family: var(--d-font-mono); font-feature-settings: var(--d-ff-tabular); }
.dachos .dachos-inp:focus {
  border-color: var(--d-neon-green);
  box-shadow: 0 0 0 3px rgba(76, 183, 153, 0.14);
}
.dachos .dachos-inp::placeholder { color: var(--d-fg-3); }

/* ============================================================
   Toolbar
   ============================================================ */
.dachos .dachos-toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--d-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--d-space-5);
}
.dachos .dachos-toolbar .spacer { flex: 1; }

/* ============================================================
   Pulse dot
   ============================================================ */
.dachos .dachos-pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
.dachos .dachos-pulse-dot.on { animation: d-pulse-ring 1.6s ease-in-out infinite; }
@keyframes d-pulse-ring {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 6px rgba(76, 183, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 183, 153, 0); }
}