/**
 * Wapu Admin DS — Tokens (CANON v5.1.1)
 *
 * Source of truth para TODA la apariencia del admin común (Layout A + B Enhanced).
 * v5.1.1 reconcilia los tokens introducidos en 5.1.0 que sobrescribían valores
 * existentes. Ahora hay UN solo declarador por token.
 *
 * @package WapuCore
 * @since   5.0.0
 * @updated 5.1.1
 */

:root {

	/* SPACING — grid 8px estricto */
	--wa-space-half: 4px;
	--wa-space-1:    8px;
	--wa-space-2:   16px;
	--wa-space-3:   24px;
	--wa-space-4:   32px;
	--wa-space-6:   48px;
	--wa-space-8:   64px;

	/* RADII */
	--wa-radius-sm:  6px;
	--wa-radius:    10px;
	--wa-radius-md: 12px;
	--wa-radius-lg: 16px;
	--wa-radius-xl: 20px;
	--wa-radius-pill: 9999px;

	/* BORDERS */
	--wa-border-width: 1px;
	--wa-border-thin:  0.5px;
	--wa-border-thick: 2px;
	--wa-border-color:        rgba(15, 23, 42, 0.08);
	--wa-border-color-soft:   rgba(15, 23, 42, 0.05);
	--wa-border-color-strong: rgba(15, 23, 42, 0.16);

	/* TYPOGRAPHY */
	--wa-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
	--wa-font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
	--wa-font-xs:    10px;
	--wa-font-sm:    11px;
	--wa-font-base:  13px;
	--wa-font-md:    14px;
	--wa-font-lg:    16px;
	--wa-font-xl:    20px;
	--wa-font-2xl:   28px;
	--wa-font-3xl:   36px;
	--wa-weight-regular:  400;
	--wa-weight-medium:   500;
	--wa-weight-semibold: 600;
	--wa-weight-bold:     700;
	--wa-leading-tight:   1.2;
	--wa-leading-snug:    1.4;
	--wa-leading-normal:  1.5;
	--wa-leading-relaxed: 1.6;
	--wa-tracking-tight:  -0.01em;
	--wa-tracking-normal:  0;
	--wa-tracking-wide:    0.04em;
	--wa-tracking-wider:   0.08em;

	/* SEMANTIC COLORS */
	--wa-success:        #059669;
	--wa-success-soft:   rgba(5, 150, 105, 0.10);
	--wa-success-border: rgba(5, 150, 105, 0.20);
	--wa-warning:        #D97706;
	--wa-warning-soft:   rgba(217, 119, 6, 0.10);
	--wa-warning-border: rgba(217, 119, 6, 0.20);
	--wa-error:          #D4183D;
	--wa-error-soft:     rgba(212, 24, 61, 0.10);
	--wa-error-border:   rgba(212, 24, 61, 0.20);
	--wa-info:           #3B82F6;
	--wa-info-soft:      rgba(59, 130, 246, 0.10);
	--wa-info-border:    rgba(59, 130, 246, 0.20);

	/* TEXT */
	--wa-text:           #0A0F1A;
	--wa-text-muted:     #64748B;
	--wa-text-subtle:    #94A3B8;
	--wa-text-disabled:  #CBD5E1;
	--wa-text-on-accent: #FFFFFF;

	/* SURFACES */
	--wa-surface:        #FFFFFF;
	--wa-surface-2:      #FAFAFA;
	--wa-surface-3:      #F4F4F5;
	--wa-surface-sidebar:#FFFFFF;
	--wa-surface-canvas: #F8FAFC;
	--wa-overlay:        rgba(15, 23, 42, 0.5);

	/* ACCENT (dynamic — overridden by scheme) */
	--wa-accent:         #7C3AED;
	--wa-accent-hover:   #6D28D9;
	--wa-accent-text:    #FFFFFF;
	--wa-accent-soft:    rgba(124, 58, 237, 0.10);
	--wa-accent-border:  rgba(124, 58, 237, 0.20);
	--wa-a05:            rgba(124, 58, 237, 0.05);
	--wa-a10:            rgba(124, 58, 237, 0.10);
	--wa-a15:            rgba(124, 58, 237, 0.15);
	--wa-a18:            rgba(124, 58, 237, 0.18);
	--wa-a20:            rgba(124, 58, 237, 0.20);
	--wa-a35:            rgba(124, 58, 237, 0.35);

	/* CATEGORY ACCENTS */
	--wa-cat-base:        #6366F1;
	--wa-cat-tienda:      #EC4899;
	--wa-cat-playground:  #F97316;
	--wa-cat-sys:         #64748B;
	--wa-cat-dev:         #10B981;

	/* SHADOWS — UN solo declarador. v5.1.1 reconciliado. */
	--wa-shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
	--wa-shadow-sm:    0 2px 6px rgba(15, 23, 42, 0.05);
	--wa-shadow:       0 4px 12px rgba(15, 23, 42, 0.06);
	--wa-shadow-md:    0 6px 20px rgba(15, 23, 42, 0.08);
	--wa-shadow-lg:    0 12px 32px rgba(15, 23, 42, 0.12);
	--wa-shadow-xl:    0 20px 40px rgba(15, 23, 42, 0.16);
	--wa-shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.08), inset 0 0 0 0.5px rgba(255, 255, 255, 0.40);

	/* FOCUS RING */
	--wa-focus-ring:   0 0 0 3px var(--wa-a20);

	/* MOTION — durations canónicas + alias semánticos */
	--wa-duration-fast:   0.12s;
	--wa-duration-normal: 0.2s;
	--wa-duration-slow:   0.35s;
	--wa-dur-instant:     0ms;
	--wa-dur-fast:        var(--wa-duration-fast);
	--wa-dur-base:        var(--wa-duration-normal);
	--wa-dur-slow:        var(--wa-duration-slow);
	--wa-dur-deliberate:  0.5s;

	--wa-ease:        cubic-bezier(0.4, 0, 0.2, 1);
	--wa-ease-out:    cubic-bezier(0, 0, 0.2, 1);
	--wa-ease-in:     cubic-bezier(0.4, 0, 1, 1);
	--wa-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--wa-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	--wa-transition: all var(--wa-duration-normal) var(--wa-ease);

	/* Z-INDEX SCALE — UN solo declarador. v5.1.1 reconciliado. */
	--wa-z-base:     1;
	--wa-z-elevated: 10;
	--wa-z-raised:   var(--wa-z-elevated);
	--wa-z-sticky:   100;
	--wa-z-dropdown: var(--wa-z-sticky);
	--wa-z-overlay:  500;
	--wa-z-modal:    1000;
	--wa-z-toast:    9999;
	--wa-z-tooltip:  10000;
}

/* STATE TOKENS — variants reusables por componentes */
:root {
	--wa-state-success-bg:     var(--wa-success-soft);
	--wa-state-success-border: var(--wa-success-border);
	--wa-state-success-fg:     var(--wa-success);
	--wa-state-warning-bg:     var(--wa-warning-soft);
	--wa-state-warning-border: var(--wa-warning-border);
	--wa-state-warning-fg:     var(--wa-warning);
	--wa-state-error-bg:       var(--wa-error-soft);
	--wa-state-error-border:   var(--wa-error-border);
	--wa-state-error-fg:       var(--wa-error);
	--wa-state-info-bg:        var(--wa-info-soft);
	--wa-state-info-border:    var(--wa-info-border);
	--wa-state-info-fg:        var(--wa-info);
	--wa-state-neutral-bg:     var(--wa-surface-3);
	--wa-state-neutral-border: var(--wa-border-color);
	--wa-state-neutral-fg:     var(--wa-text-muted);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	:root {
		--wa-duration-fast:   0ms;
		--wa-duration-normal: 0ms;
		--wa-duration-slow:   0ms;
		--wa-dur-instant:     0ms;
		--wa-dur-fast:        0ms;
		--wa-dur-base:        0ms;
		--wa-dur-slow:        0ms;
		--wa-dur-deliberate:  0ms;
	}
}