/**
 * MabaControl Design System — Tokens
 * Variables CSS globales: colores, tipografía, espaciados, sombras, bordes, radios.
 * Se cargan DESPUÉS de app.css para poder hacer override sin !important.
 */

/* ================================================================
   TEMA LIGHT (por defecto)
   ================================================================ */
:root {
  /* ── Marca Funeraria Barrantes ── */
  --color-primary:         #5e2d8b;
  --color-primary-hover:   #4c2473;
  --color-primary-soft:    #f3eafd;
  --color-primary-light:   var(--color-primary-soft);
  --color-primary-50:      #fbf7ff;
  --color-secondary:       #00b4ff;
  --color-secondary-hover: #0098d6;
  --color-secondary-soft:  #e6f8ff;
  --color-accent:          #f9d423;
  --color-accent-hover:    #e7be12;
  --color-accent-soft:     #fff8d6;

  /* ── Semánticos ── */
  --success:               #10b981;
  --success-soft:          #d1fae5;
  --warning:               #f59e0b;
  --warning-soft:          #fef3c7;
  --error:                 #ef4444;
  --error-soft:            #fee2e2;
  --info:                  #3b82f6;
  --info-soft:             #dbeafe;
  --color-success:         var(--success);
  --color-success-hover:   #059669;
  --color-success-light:   var(--success-soft);
  --color-warning:         var(--warning);
  --color-warning-hover:   #d97706;
  --color-warning-light:   var(--warning-soft);
  --color-danger:          var(--error);
  --color-danger-hover:    #dc2626;
  --color-danger-light:    var(--error-soft);
  --color-info:            var(--info);
  --color-info-light:      var(--info-soft);

  /* ── Botones semánticos ── */
  --btn-primary-bg:        var(--color-primary);
  --btn-primary-border:    var(--color-primary);
  --btn-primary-hover-bg:  var(--color-primary-hover);
  --btn-primary-hover-border: var(--color-primary-hover);
  --btn-secondary-bg:      #ffffff;
  --btn-secondary-border:  var(--color-primary);
  --btn-secondary-text:    var(--color-primary);
  --btn-secondary-hover-bg: var(--color-primary-soft);
  --btn-secondary-hover-border: var(--color-primary);
  --btn-secondary-hover-text: var(--color-primary);
  --btn-ghost-bg:          transparent;
  --btn-ghost-border:      transparent;
  --btn-ghost-text:        var(--text-secondary);
  --btn-ghost-hover-bg:    var(--surface-dim);
  --btn-ghost-hover-text:  var(--color-primary);
  --btn-info-bg:           var(--info);
  --btn-info-border:       var(--info);
  --btn-info-hover-bg:     #2563eb;
  --btn-info-hover-border: #2563eb;
  --btn-success-bg:        var(--color-success);
  --btn-success-border:    var(--color-success);
  --btn-success-hover-bg:  var(--color-success-hover);
  --btn-success-hover-border: var(--color-success-hover);
  --btn-warning-bg:        var(--color-accent);
  --btn-warning-border:    var(--color-accent);
  --btn-warning-hover-bg:  var(--color-accent-hover);
  --btn-warning-hover-border: var(--color-accent-hover);
  --btn-warning-text:      #1f2937;
  --btn-danger-bg:         var(--color-danger);
  --btn-danger-border:     var(--color-danger);
  --btn-danger-hover-bg:   var(--color-danger-hover);
  --btn-danger-hover-border: var(--color-danger-hover);
  --btn-outline-primary-color: var(--color-primary);
  --btn-outline-primary-border: var(--color-primary);
  --btn-outline-primary-hover-bg: var(--color-primary-soft);
  --btn-outline-primary-hover-color: var(--color-primary-hover);
  --btn-focus-ring:        rgba(94, 45, 139, 0.25);
  --btn-text: #ffffff;

  /* ── Neutros ── */
  --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;

  /* ── Superficies ── */
  --background:            #ffffff;
  --surface:               #faf8ff;
  --surface-dim:           #f1f0f7;
  --border:                #e2e8f0;
  --input:                 #f8fafc;
  --surface-page:          var(--surface);
  --surface-card:          #ffffff;
  --surface-elevated:      #ffffff;
  --surface-sidebar:       var(--color-primary);
  --surface-navbar:        #ffffff;
  --sidebar-border:        rgba(255, 255, 255, 0.14);
  --sidebar-text:          #ffffff;
  --sidebar-text-muted:    rgba(255, 255, 255, 0.78);
  --sidebar-icon:          rgba(255, 255, 255, 0.82);
  --sidebar-hover-bg:      rgba(255, 255, 255, 0.12);
  --sidebar-active-bg:     rgba(255, 255, 255, 0.16);
  --sidebar-submenu-bg:    rgba(76, 36, 115, 0.42);
  --sidebar-logo-text:     #ffffff;

  /* ── Texto ── */
  --text-primary:          #0f172a;
  --text-secondary:        #475569;
  --text-muted:            #64748b;
  --text-tertiary:         #94a3b8;
  --text-inverse:          #ffffff;
  --text-inverted:         #ffffff;
  --text-link:             var(--color-primary);

  /* ── Tipografía ── */
  --font-family:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:             'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  0.875rem;
  --text-md:    1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;

  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* ── Espaciados (escala de 4px) ── */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;

  --page-padding:     var(--space-6);
  --card-padding:     var(--space-6);
  --section-gap:      var(--space-6);
  --form-gap:         var(--space-5);
  --form-grid-gap-x:  var(--space-5);
  --form-grid-gap-y:  var(--space-4);
  --input-padding-x:  var(--space-3);
  --input-padding-y:  var(--space-2);

  /* ── Bordes ── */
  --border-color:       var(--border);
  --border-color-hover: var(--color-gray-300);
  --border-color-focus: var(--color-primary);
  --control-bg:         var(--input);
  --control-bg-focus:   var(--surface-card);
  --control-border:     var(--border-color);
  --control-border-hover: var(--border-color-hover);
  --control-text:       var(--text-primary);
  --control-placeholder: var(--text-tertiary);
  --control-focus-ring: rgba(94, 45, 139, 0.18);
  --control-error-ring: rgba(239, 68, 68, 0.15);
  --control-disabled-bg: var(--surface-dim);
  --control-disabled-text: var(--text-muted);
  --control-addon-bg:   var(--color-gray-50);
  --control-addon-text: var(--text-secondary);
  --menu-bg:            var(--surface-card);
  --menu-border:        var(--border-color);
  --menu-item-hover:    var(--color-gray-100);
  --btn-outline-secondary-hover-bg: var(--color-gray-100);
  --btn-outline-secondary-hover-color: var(--text-primary);
  --btn-outline-secondary-hover-border: var(--border-color-hover);
  --select-arrow-icon:   url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  --border-width:       1px;
  --border-style:       solid;
  --border-default:     var(--border-width) var(--border-style) var(--border-color);

  /* ── Sombras ── */
  --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ── Radios ── */
  --radius-sm:    6px;    /* etiquetas, indicadores pequeños  */
  --radius-md:    8px;    /* botones, inputs, controles        */
  --radius-lg:    12px;   /* dropdowns, list-groups, menus     */
  --radius-xl:    16px;   /* cards, paneles, contenedores      */
  --radius-2xl:   16px;   /* modales                           */
  --radius-full:  9999px; /* pills, avatares circulares        */

  /* ── Tamaños ── */
  --input-height-sm:  32px;
  --input-height-md:  40px;
  --input-height-lg:  48px;
  --btn-height-sm:    32px;
  --btn-height-md:    40px;
  --btn-height-lg:    48px;

  --sidebar-width:    260px;
  --sidebar-collapsed: 70px;
  --navbar-height:    60px;

  /* ── Tabla ── */
  --table-stripe:    var(--color-gray-50);
  --table-hover:     var(--color-primary-50);
  --table-border:    var(--color-gray-200);

  /* ── Transiciones ── */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease-out;
}

/* ================================================================
   TEMA DARK
   ================================================================ */
[data-theme="dark"],
.layout-dark {
  --background:         #020617;
  --surface:            #0f172a;
  --surface-dim:        #1e293b;
  --surface-bright:     #1e293b;
  --border:             #1e293b;
  --input:              #0f172a;
  --surface-page:       var(--background);
  --surface-card:       #111827;
  --surface-elevated:   var(--surface-bright);
  --surface-sidebar:    #0f172a;
  --surface-navbar:     #111827;
  --sidebar-border:     #1e293b;
  --sidebar-text:       #f8fafc;
  --sidebar-text-muted: #cbd5e1;
  --sidebar-icon:       #cbd5e1;
  --sidebar-hover-bg:   rgba(148, 163, 184, 0.12);
  --sidebar-active-bg:  #1e293b;
  --sidebar-submenu-bg: rgba(30, 41, 59, 0.56);
  --sidebar-logo-text:  #f8fafc;

  --text-primary:       #f8fafc;
  --text-secondary:     #cbd5e1;
  --text-muted:         #94a3b8;
  --text-tertiary:      #94a3b8;
  --text-inverse:       #020617;
  --text-inverted:      #020617;

  --border-color:       var(--border);
  --border-color-hover: #475569;

  --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);

  --color-primary:      #5e2d8b;
  --color-primary-hover: #8b5bb7;
  --color-primary-soft: rgba(94, 45, 139, 0.26);
  --color-primary-light: var(--color-primary-soft);
  --color-primary-50:    rgba(94, 45, 139, 0.16);
  --color-secondary:       #00b4ff;
  --color-secondary-hover: #38c6ff;
  --color-secondary-soft:  rgba(0, 180, 255, 0.16);
  --color-accent:          #f9d423;
  --color-accent-hover:    #ffe36d;
  --color-accent-soft:     rgba(249, 212, 35, 0.16);
  --success:            #10b981;
  --success-soft:       rgba(16, 185, 129, 0.16);
  --warning:            #f59e0b;
  --warning-soft:       rgba(245, 158, 11, 0.16);
  --error:              #ef4444;
  --error-soft:         rgba(239, 68, 68, 0.16);
  --info:               #3b82f6;
  --info-soft:          rgba(59, 130, 246, 0.16);
  --color-success:      var(--success);
  --color-success-hover: #34d399;
  --color-success-light: var(--success-soft);
  --color-warning:      var(--warning);
  --color-warning-hover: #fbbf24;
  --color-warning-light: var(--warning-soft);
  --color-danger:       var(--error);
  --color-danger-hover: #f87171;
  --color-danger-light: var(--error-soft);
  --color-info:         var(--info);
  --color-info-light:   var(--info-soft);

  --btn-primary-bg:     var(--color-primary);
  --btn-primary-border: var(--color-primary);
  --btn-primary-hover-bg: var(--color-primary-hover);
  --btn-primary-hover-border: var(--color-primary-hover);
  --btn-secondary-bg:   var(--surface-card);
  --btn-secondary-border: var(--color-primary);
  --btn-secondary-text: #f8fafc;
  --btn-secondary-hover-bg: var(--color-primary-light);
  --btn-secondary-hover-border: var(--color-primary-hover);
  --btn-secondary-hover-text: #ffffff;
  --btn-ghost-bg:       transparent;
  --btn-ghost-border:   transparent;
  --btn-ghost-text:     var(--text-secondary);
  --btn-ghost-hover-bg: var(--surface-elevated);
  --btn-ghost-hover-text: #ffffff;
  --btn-info-bg:        var(--info);
  --btn-info-border:    var(--info);
  --btn-info-hover-bg:  #60a5fa;
  --btn-info-hover-border: #60a5fa;
  --btn-success-bg:     var(--color-success);
  --btn-success-border: var(--color-success);
  --btn-success-hover-bg: var(--color-success-hover);
  --btn-success-hover-border: var(--color-success-hover);
  --btn-warning-bg:     var(--color-accent);
  --btn-warning-border: var(--color-accent);
  --btn-warning-hover-bg: var(--color-accent-hover);
  --btn-warning-hover-border: var(--color-accent-hover);
  --btn-warning-text:   #1f2937;
  --btn-danger-bg:      var(--color-danger);
  --btn-danger-border:  var(--color-danger);
  --btn-danger-hover-bg: var(--color-danger-hover);
  --btn-danger-hover-border: var(--color-danger-hover);
  --btn-outline-primary-color: var(--color-primary);
  --btn-outline-primary-border: var(--color-primary);
  --btn-outline-primary-hover-bg: var(--color-primary-light);
  --btn-outline-primary-hover-color: #ffffff;
  --btn-focus-ring:     rgba(139, 91, 183, 0.34);
  --btn-text: #ffffff;

  --control-bg:         var(--input);
  --control-bg-focus:   var(--surface-elevated);
  --control-border:     var(--border-color);
  --control-border-hover: var(--border-color-hover);
  --control-text:       var(--text-primary);
  --control-placeholder: var(--text-tertiary);
  --control-focus-ring: var(--color-primary-light);
  --control-error-ring: var(--error-soft);
  --control-disabled-bg: var(--surface-dim);
  --control-disabled-text: var(--text-muted);
  --control-addon-bg:   var(--surface-elevated);
  --control-addon-text: var(--text-secondary);
  --menu-bg:            var(--surface-card);
  --menu-border:        var(--border-color);
  --menu-item-hover:    var(--surface-elevated);
  --btn-outline-secondary-hover-bg: var(--surface-elevated);
  --btn-outline-secondary-hover-color: var(--text-primary);
  --btn-outline-secondary-hover-border: var(--border-color-hover);
  --select-arrow-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

  --table-stripe:    #1a2332;
  --table-hover:     #253347;
  --table-border:    #334155;
}