/* SenHub · piel "Sen" · tokens v0.1.0
   Carga: solo si el flag ui_skin_sen está activo. Todo vive bajo body.skin-sen.
   Dark: usa el mecanismo existente de Velzon (html[data-layout-mode="dark"]). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); }

body.skin-sen {
  /* Marca */
  --sen-primary: #7c3aed;
  --sen-primary-rgb: 124, 58, 237;
  --sen-primary-strong: #5b21b6;
  --sen-primary-hover: #6d28d9;
  --sen-primary-ink: #5d3fc0;        /* texto de acento sobre claro · 6.4:1 en #fdfdff */
  --sen-primary-soft: #f1ecfe;       /* tinte sólido, no transparencia */
  --sen-primary-soft-2: #e4dcff;
  --sen-accent: #f0abfc;

  /* Superficies y texto (claro) */
  --sen-bg: #f4f3f9;
  --sen-surface: #fdfdff;
  --sen-surface-2: #f8f7fc;
  --sen-field: #f8f7fc;
  --sen-ink: #161826;                /* 16.9:1 */
  --sen-ink-2: #4a4c5c;              /* 8.3:1 sobre surface · AA */
  --sen-ink-3: #6b6d7c;              /* 5.1:1 sobre surface · AA */
  --sen-line: #e6e5ee;
  --sen-line-strong: #d3d1df;

  /* Sidebar (igual en claro y oscuro) */
  --sen-side-bg: #150c36;
  --sen-side-bg-2: #1c1045;
  --sen-side-ink: #cfc9e6;           /* 10.9:1 sobre side-bg */
  --sen-side-ink-strong: #f1effb;
  --sen-side-title: #8f86b3;         /* 5.2:1 */
  --sen-side-active-bg: #2e1d6b;
  --sen-side-marker: #c4b5fd;

  /* Semánticos */
  --sen-success: #15803d;  --sen-success-soft: #e7f6ec;
  --sen-warning: #b45309;  --sen-warning-soft: #fdf1e3;
  --sen-danger:  #dc2626;  --sen-danger-soft:  #fdecec;
  --sen-info:    #1d4ed8;  --sen-info-soft:    #e8effd;

  /* Estados de CFDI (un solo mapa) */
  --sen-cfdi-vigente: var(--sen-success);            --sen-cfdi-vigente-bg: var(--sen-success-soft);
  --sen-cfdi-cancelado: var(--sen-danger);           --sen-cfdi-cancelado-bg: var(--sen-danger-soft);
  --sen-cfdi-pend-cancel: var(--sen-warning);        --sen-cfdi-pend-cancel-bg: var(--sen-warning-soft);
  --sen-cfdi-borrador: var(--sen-ink-2);             --sen-cfdi-borrador-bg: #efeef4;
  --sen-cfdi-ppd: var(--sen-primary-ink);            --sen-cfdi-ppd-bg: var(--sen-primary-soft);
  --sen-cfdi-por-vencer: #9a3412;                    --sen-cfdi-por-vencer-bg: #fdeee4;

  /* Espaciado */
  --sen-space-1: 4px; --sen-space-2: 8px; --sen-space-3: 12px; --sen-space-4: 16px; --sen-space-5: 24px; --sen-space-6: 32px;
  /* Texto */
  --sen-text-xs: 12px; --sen-text-sm: 13px; --sen-text-md: 14px; --sen-text-lg: 16px; --sen-text-xl: 20px; --sen-text-2xl: 28px;
  --sen-weight-regular: 400; --sen-weight-medium: 500; --sen-weight-semibold: 600;
  --sen-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sen-tracking-tight: -0.02em;

  /* Forma */
  --sen-radius-xs: 8px; --sen-radius-sm: 10px; --sen-radius-md: 14px; --sen-radius-lg: 24px; --sen-radius-pill: 999px;
  --sen-shadow-1: 0 8px 20px rgba(124, 58, 237, .12);
  --sen-shadow-2: 0 20px 50px rgba(40, 28, 90, .10);
  --sen-shadow-3: 0 40px 100px rgba(10, 6, 30, .30);
  --sen-focus: 0 0 0 3px rgba(124, 58, 237, .28);
  --sen-control-h: 42px;
  --sen-control-h-sm: 34px;
  --sen-control-h-lg: 48px;

  /* Movimiento */
  --sen-ease: cubic-bezier(.16, .84, .28, 1);
  --sen-dur: 220ms;
  --sen-dur-slow: 420ms;

  /* ── Mapeo a Velzon (verificar nombres contra su versión instalada) ── */
  --vz-primary: var(--sen-primary);
  --vz-primary-rgb: var(--sen-primary-rgb);
  --vz-primary-text-emphasis: var(--sen-primary-ink);
  --vz-primary-bg-subtle: var(--sen-primary-soft);
  --vz-primary-border-subtle: var(--sen-primary-soft-2);
  --vz-link-color: var(--sen-primary-ink);
  --vz-link-hover-color: var(--sen-primary-strong);
  --vz-body-bg: var(--sen-bg);
  --vz-body-color: var(--sen-ink);
  --vz-heading-color: var(--sen-ink);
  --vz-secondary-color: var(--sen-ink-2);
  --vz-tertiary-color: var(--sen-ink-3);
  --vz-card-bg: var(--sen-surface);
  --vz-card-bg-custom: var(--sen-surface);
  --vz-secondary-bg: var(--sen-surface);
  --vz-tertiary-bg: var(--sen-surface-2);
  --vz-light: var(--sen-surface-2);
  --vz-input-bg: var(--sen-field);
  --vz-input-bg-custom: var(--sen-field);
  --vz-border-color: var(--sen-line);
  --vz-border-color-translucent: var(--sen-line);
  --vz-border-radius: var(--sen-radius-md);
  --vz-border-radius-sm: var(--sen-radius-sm);
  --vz-border-radius-lg: var(--sen-radius-lg);
  --vz-font-sans-serif: var(--sen-font);
  --vz-body-font-family: var(--sen-font);
  --vz-success: var(--sen-success);
  --vz-warning: var(--sen-warning);
  --vz-danger: var(--sen-danger);
  --vz-info: var(--sen-info);
  /* Sidebar y topbar */
  --vz-vertical-menu-bg: var(--sen-side-bg);
  --vz-vertical-menu-border: transparent;
  --vz-vertical-menu-title-color: var(--sen-side-title);
  --vz-vertical-menu-item-color: var(--sen-side-ink);
  --vz-vertical-menu-item-hover-color: var(--sen-side-ink-strong);
  --vz-vertical-menu-item-active-color: var(--sen-side-ink-strong);
  --vz-vertical-menu-item-active-bg: var(--sen-side-active-bg);
  --vz-vertical-menu-sub-item-color: var(--sen-side-ink);
  --vz-vertical-menu-sub-item-hover-color: var(--sen-side-ink-strong);
  --vz-vertical-menu-sub-item-active-color: var(--sen-side-ink-strong);
  --vz-header-bg: var(--sen-bg);
  --vz-header-border: var(--sen-line);
  --vz-header-item-color: var(--sen-ink-2);
  --vz-header-item-sub-color: var(--sen-ink-3);
  --vz-topbar-search-bg: var(--sen-field);
  --vz-page-title-box-shadow: none;
  --vz-footer-bg: var(--sen-bg);
  --vz-footer-color: var(--sen-ink-3);
}

html[data-layout-mode="dark"] body.skin-sen {
  --sen-primary-ink: #c4b5fd;        /* 9.6:1 sobre surface oscuro */
  --sen-primary-soft: #251c4a;
  --sen-primary-soft-2: #33276a;
  --sen-bg: #0d0a1f;
  --sen-surface: #16112e;
  --sen-surface-2: #1c1638;
  --sen-field: #1c1638;
  --sen-ink: #f1effb;                /* 16.2:1 */
  --sen-ink-2: #c5c1d9;              /* 10.4:1 */
  --sen-ink-3: #9a95b3;              /* 6.1:1 */
  --sen-line: #2a2446;
  --sen-line-strong: #3a3360;
  --sen-side-bg: #0f0a26;
  --sen-side-bg-2: #150c36;
  --sen-side-active-bg: #2a1c63;
  --sen-success: #4ade80;  --sen-success-soft: #13301f;
  --sen-warning: #fbbf24;  --sen-warning-soft: #33260d;
  --sen-danger:  #f87171;  --sen-danger-soft:  #3a1616;
  --sen-info:    #93c5fd;  --sen-info-soft:    #15223d;
  --sen-cfdi-borrador-bg: #221d3b;
  --sen-cfdi-por-vencer: #fdba74;    --sen-cfdi-por-vencer-bg: #33200f;
  --sen-shadow-1: 0 8px 20px rgba(0, 0, 0, .35);
  --sen-shadow-2: 0 20px 50px rgba(0, 0, 0, .40);
}