/* ─── CANARIO (id: ember) — minimalista: amarillo canario + negro + blanco
   Inspirado en marcas tipo Vercel/Linear pero con el twist amarillo. Yellow
   no chillón (#facc15 yellow-400, suave). Acentos negros puros para el
   contraste editorial. Tipografía con peso. Cero saturación violet. */
html[data-abk-variant="ember"] {
  /* Primary se mantiene indigo-violet (Cosmic Blue base), pero los accents
     se vuelven canary-yellow + black como pareja monocromática */
  --abk-accent:            #eab308;             /* canary-500 — base contrast */
  --abk-accent-2:          #facc15;             /* canary-400 — más brillante para hovers */
  --abk-accent-soft:       #fef08a;             /* canary-200 — pastel sutil */
  --abk-accent-glow:       rgba(250,204,21,.30);

  /* Texto: títulos negros profundos, sin tinte morado */
  --abk-text-heading:      #0a0a0a;
  --abk-text-heading-soft: #1a1a1a;

  /* Sombras NEUTRAS negras con apenas un beso amarillo */
  --abk-shadow-1:          0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.06);
  --abk-shadow-2:          0 4px 16px rgba(0,0,0,.08), 0 1px 3px rgba(250,204,21,.08);
  --abk-shadow-3:          0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(250,204,21,.10);
  --abk-shadow-modal:      0 20px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
}
/* LIGHT — módulos con lavado cálido crema (identidad Canario, legible) */
html[data-abk-variant="ember"]:not([data-theme="dark"]) {
  --abk-surface:           #fdf7e6;
  --abk-surface-2:         #f9efce;
  --abk-border-section:    rgba(234,179,8,.28);
  --abk-border-soft:       rgba(234,179,8,.15);
}
html[data-theme="dark"][data-abk-variant="ember"] {
  /* Dark: negro puro de fondo (#0a0a0a) + amarillo canario brillante */
  --abk-bg:                #0a0a0a;
  --abk-bg-2:              #141414;
  --abk-bg-shell:          #000000;
  --abk-surface:           #141414;
  --abk-surface-2:         #1c1c1c;
  --abk-text:              #fafafa;
  --abk-text-soft:         #a3a3a3;
  --abk-text-muted:        #737373;
  --abk-text-on-shell:     #fafafa;
  --abk-text-heading:      #ffffff;             /* títulos blancos puros */
  --abk-text-heading-soft: #fafafa;
  --abk-border-soft:       rgba(250,204,21,.10);
  --abk-border-section:    rgba(250,204,21,.20);
  --abk-border-strong:     rgba(250,204,21,.45);
  --abk-input-bg:          #141414;
  --abk-input-border:      rgba(250,204,21,.22);

  --abk-accent:            #facc15;
  --abk-accent-2:          #fde047;
  --abk-accent-soft:       #fef08a;
  --abk-accent-glow:       rgba(250,204,21,.50);

  --abk-shadow-1:          0 1px 2px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.40);
  --abk-shadow-2:          0 4px 16px rgba(0,0,0,.55), 0 0 18px rgba(250,204,21,.10);
  --abk-shadow-3:          0 8px 24px rgba(0,0,0,.60), 0 0 24px rgba(250,204,21,.14);
  --abk-shadow-modal:      0 20px 60px rgba(0,0,0,.80), 0 0 0 1px rgba(250,204,21,.18);
}
/* CANARIO — minimalista: amarillo + negro + blanco. Mood editorial sobrio. */
html[data-abk-variant="ember"] .abk-h1 {
  color: #0a0a0a;
}
html[data-abk-variant="ember"] .abk-h1::after {
  /* Línea decorativa: barra amarilla pura sin gradient */
  background: #facc15;
  box-shadow: none;
}
html[data-abk-variant="ember"] .abk-card:hover {
  border-color: #0a0a0a;
  box-shadow: var(--abk-shadow-3);
}
html[data-abk-variant="ember"] .abk-input:focus,
html[data-abk-variant="ember"] .abk-textarea:focus,
html[data-abk-variant="ember"] .abk-select:focus {
  border-color: #0a0a0a !important;
  box-shadow: 0 0 0 3px rgba(250,204,21,.40), 0 0 0 1px #0a0a0a;
}
/* Canario HEADER: NEGRO puro con franja amarilla en el borde inferior
   (estilo "tape") — minimal pro */
html[data-abk-variant="ember"] {
  --header-bg:        linear-gradient(180deg, #000000 0%, #0a0a0a 100%) !important;
  --header-border:    #facc15 !important;
  --header-shadow:    rgba(0, 0, 0, .35) !important;
}
html[data-abk-variant="ember"] .main-header {
  border-bottom: 3px solid #facc15 !important;
}
/* Canario status-strip: blanco con borde inferior amarillo (light), o
   negro con borde amarillo (dark) — según el modo. */
html[data-abk-variant="ember"]:not([data-theme="dark"]) .status-strip {
  background: #fafafa;
  border-bottom: 2px solid #facc15;
  color: #0a0a0a;
}
html[data-abk-variant="ember"]:not([data-theme="dark"]) .svc-name {
  color: #1a1a1a;
}
html[data-abk-variant="ember"]:not([data-theme="dark"]) .svc-indicator {
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}
html[data-abk-variant="ember"]:not([data-theme="dark"]) .svc-indicator.svc-clickable:hover {
  background: rgba(250,204,21,.18);
  border-color: rgba(0,0,0,.20);
}
html[data-theme="dark"][data-abk-variant="ember"] .status-strip {
  background: #0a0a0a;
  border-bottom: 2px solid #facc15;
}


/* ===== IDENTIDAD: color de ACCIÓN (primary ramp) por tema — light + dark.
   Cascada a botones, links, focus, tabs activos, contorno del h1, badges. ===== */
html[data-abk-variant="ember"]:not([data-theme="dark"]) {
  --abk-primary:           #eab308;
  --abk-primary-2:         #ca8a04;
  --abk-primary-3:         #facc15;
  --abk-primary-deep:      #a16207;
  --abk-primary-soft:      #fde047;
  --abk-primary-ink:       #1a1407;
  --abk-primary-glow:      rgba(234,179,8,.35);
  --abk-text-on-primary:   #1a1407;
  --abk-text-link:         #a16207;
}
html[data-theme="dark"][data-abk-variant="ember"] {
  --abk-primary:           #facc15;
  --abk-primary-2:         #eab308;
  --abk-primary-3:         #fde047;
  --abk-primary-deep:      #ca8a04;
  --abk-primary-soft:      #fde047;
  --abk-primary-ink:       #0a0a0a;
  --abk-primary-glow:      rgba(250,204,21,.40);
  --abk-text-on-primary:   #0a0a0a;
  --abk-text-link:         #fde047;
}

/* IDENTIDAD: focus de inputs/controles por tema */
html[data-abk-variant="ember"]:not([data-theme="dark"]) { --abk-input-border-focus: #eab308; --abk-input-ring: rgba(234,179,8,.30); }
html[data-theme="dark"][data-abk-variant="ember"] { --abk-input-border-focus: #facc15; --abk-input-ring: rgba(250,204,21,.35); }