/* ==========================================================================
   Konecia · Design Tokens · CSS Custom Properties
   v2.1 — generated from tokens.json
   Drop into your global stylesheet. Use via var(--kc-color-lime) etc.
   ========================================================================== */

:root {
  /* ── Color · brand surfaces ────────────────────────────────────── */
  --kc-color-ink:        #0B1410;
  --kc-color-ink-2:      #0F1B14;
  --kc-color-ink-3:      #16261C;
  --kc-color-ink-4:      #1F3326;
  --kc-color-moss:       #2F4A38;
  --kc-color-bone:       #F4F1EA;
  --kc-color-bone-2:     #EAE5D8;
  --kc-color-paper:      #FBF9F4;

  /* ── Color · accents ───────────────────────────────────────────── */
  --kc-color-lime:       #C6F24B;
  --kc-color-lime-2:     #D7FF6B;
  --kc-color-emerald:    #10B981;
  --kc-color-emerald-2:  #0E8C68;

  /* ── Color · status ────────────────────────────────────────────── */
  --kc-color-success:    #10B981;
  --kc-color-warning:    #F59E0B;
  --kc-color-danger:     #EF4444;
  --kc-color-info:       #3B82F6;

  /* ── Color · soft (transparencias canónicas — evita rgba dispersos) ─── */
  /* Backgrounds suaves para banners de estado, hovers y backdrops. */
  --kc-color-emerald-soft:  rgba(16, 185, 129, 0.10);
  --kc-color-emerald-soft-2: rgba(16, 185, 129, 0.18);
  --kc-color-lime-soft:     rgba(198, 242, 75, 0.18);
  --kc-color-success-soft:  rgba(16, 185, 129, 0.12);
  --kc-color-warning-soft:  rgba(245, 158, 11, 0.12);
  --kc-color-danger-soft:   rgba(239, 68, 68, 0.10);
  --kc-color-danger-soft-2: rgba(239, 68, 68, 0.18);
  --kc-color-info-soft:     rgba(59, 130, 246, 0.12);
  --kc-color-ai-suggested-soft: rgba(167, 139, 250, 0.12);

  /* ── Color · AI / agent state ──────────────────────────────────── */
  --kc-color-ai-suggested: #A78BFA;
  --kc-color-ai-auto:      #C6F24B;
  --kc-color-ai-human:     #F4F1EA;
  --kc-color-ai-escalated: #F59E0B;

  /* ── Color · channels ──────────────────────────────────────────── */
  --kc-channel-whatsapp:   #25D366;
  --kc-channel-instagram:  #E1306C;
  --kc-channel-messenger:  #0084FF;
  --kc-channel-webchat:    #C6F24B;
  --kc-channel-email:      #A78BFA;
  --kc-channel-sms:        #10B981;
  --kc-channel-telegram:   #229ED9;
  /* TikTok signature: black-dominant with cyan + magenta accents. Para chip/dot
     usamos el black principal — los grandes (HubSpot, Bird) lo manejan igual. */
  --kc-channel-tiktok:     #000000;
  --kc-channel-tiktok-2:   #25F4EE; /* cyan accent — gradient secondary */
  --kc-channel-tiktok-3:   #FE2C55; /* magenta accent — gradient secondary */

  /* ── Color · semantic (light mode) ─────────────────────────────── */
  --kc-bg:               var(--kc-color-paper);
  --kc-bg-elevated:      #FFFFFF;
  --kc-bg-muted:         var(--kc-color-bone);
  --kc-fg:               var(--kc-color-ink);
  --kc-fg-muted:         rgba(11, 20, 16, 0.62);
  --kc-fg-subtle:        rgba(11, 20, 16, 0.42);
  --kc-border:           rgba(11, 20, 16, 0.10);
  --kc-border-strong:    rgba(11, 20, 16, 0.22);
  --kc-accent:           var(--kc-color-emerald);
  --kc-accent-fg:        #FFFFFF;
  --kc-focus-ring:       rgba(16, 185, 129, 0.45);

  /* ── Typography · families ─────────────────────────────────────── */
  --kc-font-sans:  "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kc-font-mono:  "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --kc-font-serif: "Instrument Serif", Georgia, serif;

  /* ── Typography · weights ──────────────────────────────────────── */
  --kc-weight-regular:  400;
  --kc-weight-medium:   500;
  --kc-weight-semibold: 600;
  --kc-weight-bold:     700;

  /* ── Typography · scale ────────────────────────────────────────── */
  --kc-text-xs:   12px;
  --kc-text-sm:   13px;
  --kc-text-base: 15px;
  --kc-text-md:   17px;
  --kc-text-lg:   20px;
  --kc-text-xl:   24px;
  --kc-text-2xl:  32px;
  --kc-text-3xl:  44px;
  --kc-text-4xl:  60px;
  --kc-text-5xl:  84px;
  --kc-text-6xl:  120px;

  /* ── Typography · line height + tracking ───────────────────────── */
  --kc-leading-tight:   1.05;
  --kc-leading-snug:    1.2;
  --kc-leading-normal:  1.45;
  --kc-leading-relaxed: 1.6;
  --kc-tracking-tight:  -0.04em;
  --kc-tracking-normal: -0.005em;
  --kc-tracking-wide:   0.04em;
  --kc-tracking-mono:   0.14em;

  /* ── Spacing scale (4px base) ──────────────────────────────────── */
  --kc-space-0:  0;
  --kc-space-1:  4px;
  --kc-space-2:  8px;
  --kc-space-3:  12px;
  --kc-space-4:  16px;
  --kc-space-5:  20px;
  --kc-space-6:  24px;
  --kc-space-8:  32px;
  --kc-space-10: 40px;
  --kc-space-12: 48px;
  --kc-space-16: 64px;
  --kc-space-20: 80px;
  --kc-space-24: 96px;

  /* ── Radius ────────────────────────────────────────────────────── */
  --kc-radius-none: 0;
  --kc-radius-sm:   6px;
  --kc-radius-md:  10px;
  --kc-radius-lg:  14px;
  --kc-radius-xl:  20px;
  --kc-radius-2xl: 28px;
  --kc-radius-pill: 999px;

  /* ── Shadow ────────────────────────────────────────────────────── */
  --kc-shadow-sm:    0 1px 2px rgba(11,20,16,0.08);
  --kc-shadow-md:    0 4px 14px rgba(11,20,16,0.10);
  --kc-shadow-lg:    0 18px 60px rgba(11,20,16,0.18);
  --kc-shadow-xl:    0 32px 64px rgba(11,20,16,0.18);
  --kc-shadow-glow:  0 0 0 1px rgba(198,242,75,0.4), 0 8px 30px rgba(198,242,75,0.25);
  /* Sombras especializadas — para componentes específicos del brand kit. */
  --kc-shadow-emerald: 0 8px 24px rgba(16,185,129,0.35), 0 2px 6px rgba(0,0,0,0.15);
  --kc-shadow-emerald-hover: 0 12px 32px rgba(16,185,129,0.45), 0 2px 6px rgba(0,0,0,0.18);
  --kc-shadow-knob:    0 1px 3px rgba(0,0,0,0.15);
  --kc-shadow-modal:   0 32px 64px rgba(11,20,16,0.18);
  --kc-shadow-button:  0 4px 14px rgba(16,185,129,0.22);
  --kc-shadow-bubble:  0 1px 2px rgba(11,20,16,0.04);
  --kc-shadow-bubble-up: 0 -4px 16px -10px rgba(11,20,16,0.08);

  /* ── Motion ────────────────────────────────────────────────────── */
  --kc-duration-fast: 120ms;
  --kc-duration-base: 220ms;
  --kc-duration-slow: 420ms;
  --kc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --kc-ease-emphasis: cubic-bezier(0.3, 0, 0, 1.2);

  /* ── Breakpoints (informational; use in @media) ────────────────── */
  --kc-bp-sm:  640px;
  --kc-bp-md:  768px;
  --kc-bp-lg:  1024px;
  --kc-bp-xl:  1280px;
  --kc-bp-2xl: 1536px;
}

/* ── Dark mode override ─────────────────────────────────────────── */
:root[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kc-bg:            var(--kc-color-ink);
    --kc-bg-elevated:   var(--kc-color-ink-2);
    --kc-bg-muted:      var(--kc-color-ink-3);
    --kc-fg:            var(--kc-color-bone);
    --kc-fg-muted:      rgba(244, 241, 234, 0.7);
    --kc-fg-subtle:     rgba(244, 241, 234, 0.45);
    --kc-border:        rgba(244, 241, 234, 0.10);
    --kc-border-strong: rgba(244, 241, 234, 0.22);
    --kc-accent:        var(--kc-color-lime);
    --kc-accent-fg:     var(--kc-color-ink);
    --kc-focus-ring:    rgba(198, 242, 75, 0.55);
  }
}

/* ── Optional: typographic primitives ───────────────────────────── */
.kc-mono   { font-family: var(--kc-font-mono);  letter-spacing: 0; }
.kc-serif  { font-family: var(--kc-font-serif); font-style: italic; }
.kc-label  { font-family: var(--kc-font-mono);  font-size: var(--kc-text-xs); letter-spacing: var(--kc-tracking-mono); text-transform: uppercase; color: var(--kc-fg-muted); }