/* ============================================================
   ROWZEN · Design Tokens v2
   Premium developer-tool aesthetic — Vercel, Linear, Attio.
   Font: Plus Jakarta Sans + JetBrains Mono
   Accent: Mint Green (#10B981)
   Backgrounds: Deep Graphite ladder (#0D0F12 → #232831)

   ARCHITECTURE
   ─────────────────────────────────────────────────────────
   1. --rz-*  →  Design System tokens (canonical)
   2. Bridge aliases below map old --color-* / --font-* /
      --shadow-* names to --rz-* values so every existing
      template and component continues to work unchanged.
   3. :root[data-ui-version="v1"]  →  restores legacy Slate
      theme instantly via JS:
        document.documentElement.setAttribute('data-ui-version','v1')
   4. :root[data-theme="light"]  →  light theme overrides
   ============================================================ */

/* ── Fonts ────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ============================================================
   ROOT — Design System v2 (Dark mode default)
   ============================================================ */
:root {

  /* ── Surface scale ────────────────────────────────────── */
  --rz-bg-app:      #0D0F12;   /* App background — deep graphite */
  --rz-bg-elev-1:   #12151A;   /* Subtle elevation (panels, sidebar) */
  --rz-bg-elev-2:   #161920;   /* Cards / containers */
  --rz-bg-elev-3:   #1B1F27;   /* Hover surface, popovers */
  --rz-bg-elev-4:   #232831;   /* Active / pressed */
  --rz-bg-overlay:  rgba(13, 15, 18, 0.72);

  /* ── Borders / dividers (translucent, etched look) ────── */
  --rz-border-subtle:   rgba(255, 255, 255, 0.05);
  --rz-border-default:  rgba(255, 255, 255, 0.08);
  --rz-border-strong:   rgba(255, 255, 255, 0.14);
  --rz-border-focus:    rgba(16, 185, 129, 0.45);

  /* ── Inner highlight — Linear's "etched" card look ────── */
  --rz-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ── Foreground / text ───────────────────────────────── */
  --rz-fg-1:        #F5F7FA;   /* Primary text */
  --rz-fg-2:        #C2C8D2;   /* Secondary text */
  --rz-fg-3:        #8A93A2;   /* Tertiary / meta */
  --rz-fg-4:        #5B6373;   /* Disabled / placeholder */
  --rz-fg-inverse:  #0D0F12;   /* Text on accent fills */

  /* ── Identity Green (surgical accent) ───────────────── */
  --rz-accent-50:       #E6FBF4;
  --rz-accent-100:      #B6F3DD;
  --rz-accent-200:      #7CE7C3;
  --rz-accent-300:      #3CD8A6;
  --rz-accent-400:      #10B981;   /* Primary accent — Mint Green */
  --rz-accent-500:      #0EA372;
  --rz-accent-600:      #0B815B;
  --rz-accent-glow:     rgba(16, 185, 129, 0.35);
  --rz-accent-soft:     rgba(16, 185, 129, 0.12);
  --rz-glow-accent:     0 0 0 4px rgba(16, 185, 129, 0.16),
                        0 0 24px rgba(16, 185, 129, 0.25);

  /* ── Node category colors (canvas) ──────────────────── */
  --rz-node-messaging:       #10B981;
  --rz-node-messaging-soft:  rgba(16, 185, 129, 0.12);
  --rz-node-crm:             #3B82F6;
  --rz-node-crm-soft:        rgba(59, 130, 246, 0.12);
  --rz-node-data:            #A855F7;
  --rz-node-data-soft:       rgba(168, 85, 247, 0.12);
  --rz-node-trigger:         #F59E0B;
  --rz-node-trigger-soft:    rgba(245, 158, 11, 0.12);

  /* ── Status / semantic ───────────────────────────────── */
  --rz-status-success:       #10B981;
  --rz-status-warning:       #F59E0B;
  --rz-status-danger:        #EF4444;
  --rz-status-info:          #3B82F6;
  --rz-status-pending:       #5B6373;
  --rz-status-active:        #10B981;
  --rz-status-success-soft:  rgba(16, 185, 129, 0.12);
  --rz-status-warning-soft:  rgba(245, 158, 11, 0.12);
  --rz-status-danger-soft:   rgba(239, 68, 68, 0.12);
  --rz-status-info-soft:     rgba(59, 130, 246, 0.12);

  /* ── Channel colors ──────────────────────────────────── */
  --rz-ch-whatsapp:  #25D366;
  --rz-ch-sms:       #6366F1;
  --rz-ch-email:     #F97316;
  --rz-ch-telegram:  #0088CC;

  /* ── Typography ──────────────────────────────────────── */
  --rz-font-sans:  "Plus Jakarta Sans", ui-sans-serif, system-ui,
                   -apple-system, "Segoe UI", Roboto, sans-serif;
  --rz-font-mono:  "JetBrains Mono", ui-monospace, "SF Mono",
                   Menlo, Consolas, monospace;

  /* Type scale */
  --rz-text-xs:   11px;   /* Captions, micro-labels */
  --rz-text-sm:   12px;   /* Meta, table cells */
  --rz-text-base: 13px;   /* App default body */
  --rz-text-md:   14px;   /* Inputs, primary UI labels */
  --rz-text-lg:   16px;   /* Card titles */
  --rz-text-xl:   20px;   /* Section headers */
  --rz-text-2xl:  24px;   /* Page titles */
  --rz-text-3xl:  32px;   /* Display small */
  --rz-text-4xl:  44px;   /* Display large */

  --rz-leading-tight:   1.2;
  --rz-leading-snug:    1.35;
  --rz-leading-normal:  1.55;
  --rz-leading-relaxed: 1.7;

  --rz-tracking-tight:  -0.02em;
  --rz-tracking-normal: -0.005em;
  --rz-tracking-wide:    0.04em;
  --rz-tracking-mono:   -0.01em;

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

  /* ── Border radii ────────────────────────────────────── */
  --rz-radius-xs:   4px;
  --rz-radius-sm:   6px;
  --rz-radius-md:   8px;    /* Nodes, buttons — "Rowzen radius" */
  --rz-radius-lg:   12px;   /* Containers */
  --rz-radius-xl:   16px;   /* Large panels */
  --rz-radius-pill: 999px;

  /* ── Shadows / elevation ─────────────────────────────── */
  --rz-shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.30);
  --rz-shadow-md:
    0 4px 14px rgba(0, 0, 0, 0.40),
    0 1px  2px rgba(0, 0, 0, 0.30);
  --rz-shadow-lg:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0  2px  4px rgba(0, 0, 0, 0.35);
  --rz-shadow-popover:
    0 16px 48px rgba(0, 0, 0, 0.60),
    0  0   0   1px rgba(255, 255, 255, 0.06);

  /* ── Motion ─────────────────────────────────────────── */
  --rz-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --rz-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --rz-duration-fast: 120ms;
  --rz-duration-base: 180ms;
  --rz-duration-slow: 280ms;

  /* ── Z-index ─────────────────────────────────────────── */
  --rz-z-base:    0;
  --rz-z-nav:     100;
  --rz-z-panel:   200;
  --rz-z-popover: 300;
  --rz-z-modal:   400;
  --rz-z-toast:   500;

  /* ============================================================
     BRIDGE ALIASES
     Maps old --color-* / --font-* / --shadow-* / --spacing-*
     names to --rz-* tokens. Every existing template and
     component CSS continues to work without any changes.
     ============================================================ */

  /* Backgrounds */
  --color-bg-primary:    var(--rz-bg-app);
  --color-bg-secondary:  var(--rz-bg-elev-2);
  --color-bg-tertiary:   var(--rz-bg-elev-3);
  --color-bg-hover:      var(--rz-bg-elev-4);

  /* Text */
  --color-text-primary:   var(--rz-fg-1);
  --color-text-secondary: var(--rz-fg-2);
  --color-text-muted:     var(--rz-fg-3);
  --color-text-inverse:   var(--rz-fg-inverse);

  /* Primary brand (Mint Green) */
  --color-primary:         var(--rz-accent-400);
  --color-primary-dark:    var(--rz-accent-500);
  --color-primary-light:   var(--rz-accent-300);
  --color-primary-lighter: var(--rz-accent-100);
  --color-primary-bg:      var(--rz-accent-soft);

  /* Secondary */
  --color-secondary:       var(--rz-fg-3);
  --color-secondary-dark:  var(--rz-fg-4);
  --color-secondary-light: var(--rz-fg-2);

  /* Borders */
  --color-border:          var(--rz-border-default);
  --color-border-light:    var(--rz-border-strong);
  --color-border-focus:    var(--rz-border-focus);

  /* Status */
  --color-success:      var(--rz-status-success);
  --color-success-bg:   var(--rz-status-success-soft);
  --color-success-dark: var(--rz-status-success);
  --color-success-light: var(--rz-status-success);
  --color-error:        var(--rz-status-danger);
  --color-error-bg:     var(--rz-status-danger-soft);
  --color-error-dark:   var(--rz-status-danger);
  --color-error-light:  var(--rz-status-danger);
  --color-warning:      var(--rz-status-warning);
  --color-warning-bg:   var(--rz-status-warning-soft);
  --color-warning-dark: var(--rz-status-warning);
  --color-warning-light: var(--rz-status-warning);
  --color-info:         var(--rz-status-info);
  --color-info-bg:      var(--rz-status-info-soft);
  --color-info-dark:    var(--rz-status-info);
  --color-info-light:   var(--rz-status-info);

  /* Neutrals */
  --color-white: #ffffff;
  --color-black: #0a0a0a;
  --color-gray-50:  #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  /* Shadows */
  --shadow-xs:   var(--rz-shadow-sm);
  --shadow-sm:   var(--rz-shadow-sm);
  --shadow-base: var(--rz-shadow-md);
  --shadow-md:   var(--rz-shadow-md);
  --shadow-lg:   var(--rz-shadow-lg);
  --shadow-xl:   var(--rz-shadow-lg);
  --shadow-glow: var(--rz-glow-accent);

  /* Typography */
  --font-family-base:    var(--rz-font-sans);
  --font-family-heading: var(--rz-font-sans);
  --font-family-mono:    var(--rz-font-mono);

  /* Font sizes (keep rem for backward compat) */
  --font-size-xs:   0.6875rem;   /* ~11px */
  --font-size-sm:   0.75rem;     /* 12px  */
  --font-size-base: 0.875rem;    /* 14px  */
  --font-size-md:   1rem;        /* 16px  */
  --font-size-lg:   1.125rem;    /* 18px  */
  --font-size-xl:   1.25rem;     /* 20px  */
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  2rem;
  --font-size-4xl:  2.75rem;
  --font-size-5xl:  3.5rem;

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   var(--rz-leading-tight);
  --line-height-normal:  var(--rz-leading-normal);
  --line-height-relaxed: var(--rz-leading-relaxed);

  /* Spacing (rem, same scale) */
  --spacing-0:  0;
  --spacing-1:  0.25rem;
  --spacing-2:  0.5rem;
  --spacing-3:  0.75rem;
  --spacing-4:  1rem;
  --spacing-5:  1.25rem;
  --spacing-6:  1.5rem;
  --spacing-8:  2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;

  /* Border widths */
  --border-width-thin:   1px;
  --border-width-medium: 2px;
  --border-width-thick:  4px;

  /* Border radii */
  --border-radius-none: 0;
  --border-radius-sm:   var(--rz-radius-sm);
  --border-radius-base: var(--rz-radius-md);
  --border-radius-md:   var(--rz-radius-lg);
  --border-radius-lg:   var(--rz-radius-xl);
  --border-radius-xl:   var(--rz-radius-xl);
  --border-radius-2xl:  20px;
  --border-radius-full: var(--rz-radius-pill);

  /* Transitions */
  --transition-fast: var(--rz-duration-fast) var(--rz-ease-out);
  --transition-base: var(--rz-duration-base) var(--rz-ease-out);
  --transition-slow: var(--rz-duration-slow) var(--rz-ease-out);

  /* Z-index */
  --z-dropdown:       var(--rz-z-popover);
  --z-sticky:         var(--rz-z-nav);
  --z-fixed:          calc(var(--rz-z-nav) + 10);
  --z-modal-backdrop: var(--rz-z-modal);
  --z-modal:          calc(var(--rz-z-modal) + 10);
  --z-popover:        var(--rz-z-popover);
  --z-tooltip:        var(--rz-z-toast);

  /* Breakpoints */
  --breakpoint-sm:  640px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;

  /* Container widths */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1400px;
  --container-2xl:  1600px;
  --container-full: 100%;

  /* Legacy aliases (backward compat) */
  --color-surface:          var(--color-bg-secondary);
  --color-surface-elevated: var(--color-bg-tertiary);
  --border-color:           var(--color-border);
  --text-color:             var(--color-text-primary);
  --text-muted:             var(--color-text-muted);
  --bg-card:                var(--color-bg-secondary);
  --bg-subtle:              var(--color-bg-tertiary);
  --color-danger:           var(--color-error);
  --color-danger-bg:        var(--color-error-bg);
}

/* ============================================================
   BASE ELEMENT STYLES
   Applies DS v2 font + smoothing to the document root.
   ============================================================ */
html {
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   LIGHT THEME  :root[data-theme="light"]
   Overrides only the surface/border/shadow tokens that
   change between dark and light. Accent color stays the same.
   ============================================================ */
:root[data-theme="light"] {
  --rz-bg-app:     #f3f3fb;
  --rz-bg-elev-1:  #eaebf7;
  --rz-bg-elev-2:  #eaebf7;
  --rz-bg-elev-3:  #dddff2;
  --rz-bg-elev-4:  #d0d3ec;

  --rz-fg-1:       #1a1a3a;
  --rz-fg-2:       #363660;
  --rz-fg-3:       #6b6b99;
  --rz-fg-4:       #9090bb;
  --rz-fg-inverse: #f3f3fb;

  --rz-border-subtle:  rgba(0, 0, 0, 0.05);
  --rz-border-default: rgba(0, 0, 0, 0.10);
  --rz-border-strong:  rgba(0, 0, 0, 0.16);
  --rz-border-focus:   rgba(16, 185, 129, 0.45);

  --rz-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.60);

  --rz-shadow-sm:
    0 1px 2px rgba(80, 80, 160, 0.07);
  --rz-shadow-md:
    0 4px 14px rgba(80, 80, 160, 0.10),
    0 1px  2px rgba(80, 80, 160, 0.08);
  --rz-shadow-lg:
    0 12px 32px rgba(80, 80, 160, 0.12),
    0  2px  4px rgba(80, 80, 160, 0.08);
  --rz-shadow-popover:
    0 16px 48px rgba(80, 80, 160, 0.15),
    0  0   0   1px rgba(0, 0, 0, 0.06);

  /* Accent soft on light backgrounds */
  --rz-accent-soft: rgba(16, 185, 129, 0.14);
  --rz-status-success-soft: rgba(16, 185, 129, 0.14);
  --rz-status-warning-soft: rgba(245, 158, 11, 0.14);
  --rz-status-danger-soft:  rgba(239, 68, 68, 0.14);
  --rz-status-info-soft:    rgba(59, 130, 246, 0.14);

  /* Accent adjusted for contrast on lavender bg */
  --rz-accent-400: #0d9e6e;  /* slightly darker green for light bg */
}

/* ============================================================
   V1 LEGACY SLATE THEME — :root[data-ui-version="v1"]
   Restores the original Indigo/Slate palette for comparison.
   Toggle via:
     document.documentElement.setAttribute('data-ui-version','v1')
     localStorage.setItem('rz-ui-version','v1')
   ============================================================ */
:root[data-ui-version="v1"] {
  /* Slate backgrounds */
  --rz-bg-app:    #0f172a;
  --rz-bg-elev-1: #162032;
  --rz-bg-elev-2: #1e293b;
  --rz-bg-elev-3: #334155;
  --rz-bg-elev-4: #475569;

  /* Slate text */
  --rz-fg-1: #f1f5f9;
  --rz-fg-2: #cbd5e1;
  --rz-fg-3: #94a3b8;
  --rz-fg-4: #64748b;

  /* Solid borders (legacy — not translucent) */
  --rz-border-subtle:  #1e293b;
  --rz-border-default: #334155;
  --rz-border-strong:  #475569;
  --rz-border-focus:   #6366f1;

  /* No inner highlight in v1 */
  --rz-inset-highlight: none;

  /* Indigo accent */
  --rz-accent-400:   #6366f1;
  --rz-accent-300:   #818cf8;
  --rz-accent-500:   #4f46e5;
  --rz-accent-100:   #e0e7ff;
  --rz-accent-soft:  rgba(99, 102, 241, 0.12);
  --rz-accent-glow:  rgba(99, 102, 241, 0.35);
  --rz-glow-accent:  0 0 0 4px rgba(99, 102, 241, 0.16),
                     0 0 24px rgba(99, 102, 241, 0.25);
  --rz-border-focus: #6366f1;

  /* Legacy status colors */
  --rz-status-success:      #22c55e;
  --rz-status-success-soft: rgba(34, 197, 94, 0.10);
  --rz-status-danger:       #ef4444;
  --rz-status-danger-soft:  rgba(239, 68, 68, 0.10);
  --rz-status-warning:      #f59e0b;
  --rz-status-warning-soft: rgba(245, 158, 11, 0.10);
  --rz-status-info:         #3b82f6;
  --rz-status-info-soft:    rgba(59, 130, 246, 0.10);

  /* Legacy shadows */
  --rz-shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.30);
  --rz-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.40),
    0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --rz-shadow-lg:
    0 20px 25px -5px rgba(0, 0, 0, 0.40),
    0  8px 10px -6px rgba(0, 0, 0, 0.30);

  /* Inter font (v1) */
  --rz-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   V1 + LIGHT THEME (combined)
   ============================================================ */
:root[data-ui-version="v1"][data-theme="light"] {
  --rz-bg-app:     #f3f3fb;
  --rz-bg-elev-1:  #eaebf7;
  --rz-bg-elev-2:  #eaebf7;
  --rz-bg-elev-3:  #dddff2;
  --rz-bg-elev-4:  #d0d3ec;
  --rz-fg-1:       #1a1a3a;
  --rz-fg-2:       #363660;
  --rz-fg-3:       #6b6b99;
  --rz-fg-4:       #9090bb;
  --rz-border-subtle:  #cdd0e8;
  --rz-border-default: #cdd0e8;
  --rz-border-strong:  #bbbfe0;
  --rz-shadow-sm:  0 1px 2px rgba(80, 80, 160, 0.07);
  --rz-shadow-md:  0 4px 6px -1px rgba(80, 80, 160, 0.10);
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES (from DS spec)
   ============================================================ */
.rz-display {
  font-size: var(--rz-text-4xl);
  font-weight: 700;
  line-height: var(--rz-leading-tight);
  letter-spacing: var(--rz-tracking-tight);
  color: var(--rz-fg-1);
}

.rz-h1 {
  font-size: var(--rz-text-3xl);
  font-weight: 600;
  line-height: var(--rz-leading-tight);
  letter-spacing: var(--rz-tracking-tight);
  color: var(--rz-fg-1);
}

.rz-h2 {
  font-size: var(--rz-text-2xl);
  font-weight: 600;
  line-height: var(--rz-leading-snug);
  letter-spacing: var(--rz-tracking-tight);
  color: var(--rz-fg-1);
}

.rz-h3 {
  font-size: var(--rz-text-xl);
  font-weight: 600;
  line-height: var(--rz-leading-snug);
  color: var(--rz-fg-1);
}

.rz-h4 {
  font-size: var(--rz-text-lg);
  font-weight: 600;
  line-height: var(--rz-leading-snug);
  color: var(--rz-fg-1);
}

.rz-body {
  font-size: var(--rz-text-md);
  font-weight: 400;
  line-height: var(--rz-leading-normal);
  color: var(--rz-fg-2);
}

.rz-meta {
  font-size: var(--rz-text-sm);
  font-weight: 500;
  color: var(--rz-fg-3);
  letter-spacing: var(--rz-tracking-normal);
}

.rz-caption {
  font-size: var(--rz-text-xs);
  font-weight: 600;
  color: var(--rz-fg-3);
  letter-spacing: var(--rz-tracking-wide);
  text-transform: uppercase;
}

/* Variable pill — for message composers: {{contacto.nombre}} */
.rz-var-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px 1px 8px;
  border-radius: var(--rz-radius-sm);
  background: var(--rz-accent-soft);
  color: var(--rz-accent-300);
  font-family: var(--rz-font-mono);
  font-size: var(--rz-text-sm);
  font-weight: 500;
  border: 1px solid rgba(16, 185, 129, 0.25);
  line-height: 1.4;
}