/* ============================================
   ZIGLY DESIGN TOKENS v1.0

   Defaults: Light theme (skin4-compatible).
   Each skin overrides color tokens via :root.
   Load order: tokens.css → custom.css → skin.css
   ============================================ */

:root {

  /* --- Colores semanticos --- */
  --z-color-primary:        #2D9EE0;
  --z-color-primary-light:  #5BB5E8;
  --z-color-primary-dark:   #1A7BBF;
  --z-color-accent:         #d500f9;
  --z-color-success:        #4caf50;
  --z-color-warning:        #ff9800;
  --z-color-error:          #f44336;
  --z-color-info:           #2196f3;

  /* --- Superficies --- */
  --z-color-bg:             #F8F8FA;
  --z-color-bg-elevated:    #ffffff;
  --z-color-bg-hover:       rgba(0, 0, 0, 0.04);
  --z-color-bg-active:      rgba(0, 0, 0, 0.08);
  --z-color-bg-disabled:    rgba(0, 0, 0, 0.12);
  --z-color-surface:        #ffffff;
  --z-color-surface-alt:    #f5f5f5;

  /* --- Texto --- */
  --z-color-text:           rgba(0, 0, 0, 0.87);
  --z-color-text-secondary: rgba(0, 0, 0, 0.54);
  --z-color-text-hint:      rgba(0, 0, 0, 0.38);
  --z-color-text-disabled:  rgba(0, 0, 0, 0.26);
  --z-color-text-inverse:   #ffffff;

  /* --- Bordes --- */
  --z-color-border:         rgba(0, 0, 0, 0.12);
  --z-color-border-strong:  rgba(0, 0, 0, 0.24);
  --z-color-divider:        rgba(0, 0, 0, 0.08);

  /* --- Spacing (escala de 4px base) --- */
  --z-space-0:   0;
  --z-space-1:   0.25rem;   /*  4px */
  --z-space-2:   0.5rem;    /*  8px */
  --z-space-3:   0.75rem;   /* 12px */
  --z-space-4:   1rem;      /* 16px */
  --z-space-5:   1.25rem;   /* 20px */
  --z-space-6:   1.5rem;    /* 24px */
  --z-space-8:   2rem;      /* 32px */
  --z-space-10:  2.5rem;    /* 40px */
  --z-space-12:  3rem;      /* 48px */
  --z-space-16:  4rem;      /* 64px */

  /* --- Tipografia --- */
  --z-font-size-xs:    0.75rem;    /* 12px */
  --z-font-size-sm:    0.8125rem;  /* 13px */
  --z-font-size-base:  0.875rem;   /* 14px */
  --z-font-size-md:    1rem;       /* 16px */
  --z-font-size-lg:    1.125rem;   /* 18px */
  --z-font-size-xl:    1.25rem;    /* 20px */
  --z-font-size-2xl:   1.5rem;     /* 24px */
  --z-font-size-3xl:   1.875rem;   /* 30px */

  --z-font-weight-normal:  400;
  --z-font-weight-medium:  500;
  --z-font-weight-bold:    600;

  --z-line-height-tight:   1.25;
  --z-line-height-normal:  1.5;
  --z-line-height-relaxed: 1.75;

  /* --- Radios de borde --- */
  --z-radius-sm:   2px;
  --z-radius-md:   4px;
  --z-radius-lg:   8px;
  --z-radius-xl:   12px;
  --z-radius-full: 9999px;

  --z-border-width: 1px;

  /* --- Sombras --- */
  --z-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --z-shadow-md:   0 2px 4px rgba(0, 0, 0, 0.1);
  --z-shadow-lg:   0 4px 12px rgba(0, 0, 0, 0.15);
  --z-shadow-xl:   0 8px 24px rgba(0, 0, 0, 0.2);

  /* --- Transiciones --- */
  --z-transition-fast:   150ms ease;
  --z-transition-normal: 250ms ease;
  --z-transition-slow:   500ms ease;

  /* --- Z-index (referencia, respetar MobileUi) --- */
  --z-zindex-dropdown:  100;
  --z-zindex-modal:     1000;
  --z-zindex-toast:     1100;
  --z-zindex-tooltip:   1200;

  --z-bg-scrollbar-track:       #ccc;
  --z-bg-scrollbar-thumb:       #888;
  --z-bg-scrollbar-thumb-hover: #555;

  /* --- Breakpoints (documentacion, CSS no soporta var() en @media) ---
     sm: 480px  |  md: 736px  |  lg: 980px  |  xl: 1200px
  */
}


/* ============================================
   CLASES UTILITARIAS MINIMAS
   ============================================ */

/* --- Estados interactivos --- */
.z-interactive {
  transition: background-color var(--z-transition-fast);
  cursor: pointer;
}
.z-interactive:hover {
  background-color: var(--z-color-bg-hover);
}
.z-interactive:active {
  background-color: var(--z-color-bg-active);
}
.z-interactive:focus-visible {
  outline: 2px solid var(--z-color-primary);
  outline-offset: 2px;
}
.z-interactive[disabled],
.z-interactive.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* --- Texto --- */
.z-text-primary   { color: var(--z-color-primary); }
.z-text-secondary { color: var(--z-color-text-secondary); }
.z-text-hint      { color: var(--z-color-text-hint); }
.z-text-success   { color: var(--z-color-success); }
.z-text-warning   { color: var(--z-color-warning); }
.z-text-error     { color: var(--z-color-error); }

/* --- Utilidades de texto --- */
.z-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.z-font-bold   { font-weight: var(--z-font-weight-bold); }
.z-font-medium { font-weight: var(--z-font-weight-medium); }

/* --- Superficies --- */
.z-surface {
  background-color: var(--z-color-surface);
  border: var(--z-border-width) solid var(--z-color-border);
  border-radius: var(--z-radius-md);
}
.z-surface-elevated {
  background-color: var(--z-color-bg-elevated);
  box-shadow: var(--z-shadow-md);
  border-radius: var(--z-radius-md);
}

/* --- Divisor --- */
.z-divider {
  border: none;
  border-top: var(--z-border-width) solid var(--z-color-divider);
  margin: var(--z-space-2) 0;
}