/*
 * S360 Design Token System — v1.1
 * Single source of truth for all visual variables.
 * Import in every HTML file: <link rel="stylesheet" href="/s360-tokens.css">
 *
 * 5 mutually exclusive color families (Etapa 3 / Fase 1B):
 *   1. Brand        — identity, used sparingly.
 *   2. Neutrals     — Dark Premium (--surface-*, --text-*) + Light Workspace (--ws-*).
 *   3. Semantic     — Success/Warning/Error/Info (--semantic-*), operational only.
 *   4. State        — inventory state (--state-disponible/separado/vendido/bloqueado).
 *   5. Commercial    — Promo coral (--state-promo-*), exclusive to Promociones.
 */

:root {
  /* ── Brand Colors ─────────────────────────────────────────────────────── */
  --brand-electric: #0000E3;
  --brand-midnight: #1D224A;
  --brand-purple:   #BD3EE6;

  /* Brand gradient — signature of S360, use sparingly (max 2-3 times per screen) */
  --gradient-brand:        linear-gradient(135deg, #0000E3 0%, #BD3EE6 100%);
  --gradient-brand-soft:   linear-gradient(135deg, rgba(0,0,227,0.15) 0%, rgba(189,62,230,0.15) 100%);
  --gradient-brand-border: linear-gradient(135deg, rgba(0,0,227,0.6) 0%, rgba(189,62,230,0.6) 100%);

  /* ── State Colors (business inventory state — family 4 of 5) ────────────── */
  /* Never use brand colors for functional states. Official palette:
     Disponible=Blanco, Separado=Amarillo, Vendido=Verde, Bloqueado=Rojo. */
  --state-disponible-bg:    rgba(255, 255, 255, 0.04);
  --state-disponible-color: #F1F5F9;
  --state-disponible-border: rgba(255, 255, 255, 0.35);

  --state-separado-bg:    rgba(234, 179, 8, 0.12);
  --state-separado-color: #fbbf24;
  --state-separado-border: rgba(234, 179, 8, 0.25);

  --state-bloqueado-bg:    rgba(239, 68, 68, 0.12);
  --state-bloqueado-color: #f87171;
  --state-bloqueado-border: rgba(239, 68, 68, 0.25);

  --state-vendido-bg:    rgba(34, 197, 94, 0.12);
  --state-vendido-color: #4ade80;
  --state-vendido-border: rgba(34, 197, 94, 0.25);

  /* Promo — Coral, family 5: commercial attribute, independent of inventory state.
     Reserved exclusively for Promociones — never reused for anything else. */
  --state-promo:        #FF6B4A;
  --state-promo-bg:     rgba(255, 107, 74, 0.12);
  --state-promo-color:  #FF6B4A;
  --state-promo-border: rgba(255, 107, 74, 0.30);
  --state-promo-glow:   0 0 12px rgba(255, 107, 74, 0.20);

  /* ── Semantic Colors (system/operational — family 3 of 5) ────────────────── */
  /* Success/Warning/Error/Info communicate system state, never brand identity.
     Distinct from business inventory state colors above — different meaning,
     never mixed visually. */
  --semantic-success:        #22C55E;
  --semantic-success-bg:     rgba(34, 197, 94, 0.12);
  --semantic-success-border: rgba(34, 197, 94, 0.25);

  --semantic-warning:        #F59E0B;
  --semantic-warning-bg:     rgba(245, 158, 11, 0.12);
  --semantic-warning-border: rgba(245, 158, 11, 0.25);

  --semantic-error:        #EF4444;
  --semantic-error-bg:     rgba(239, 68, 68, 0.12);
  --semantic-error-border: rgba(239, 68, 68, 0.25);

  --semantic-info:        #0EA5E9;
  --semantic-info-bg:     rgba(14, 165, 233, 0.12);
  --semantic-info-border: rgba(14, 165, 233, 0.25);

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --surface-void:    #05001A;
  --surface-base:    #080020;
  --surface-raised:  #0E0830;
  --surface-overlay: #120A38;
  --surface-active:  #1A1050;
  --surface-card:    rgba(255, 255, 255, 0.035);
  --surface-card-hover: rgba(255, 255, 255, 0.055);

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-soft:    rgba(255, 255, 255, 0.10);
  --border-medium:  rgba(255, 255, 255, 0.16);
  --border-brand:   rgba(0, 0, 227, 0.45);
  --border-focus:   rgba(0, 0, 227, 0.70);

  /* ── Text (Dark Premium — topbar/overlays) ───────────────────────────────── */
  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted:     #4B5563;
  --text-brand:     #0000E3;
  --text-accent:    #BD3EE6;

  /* ── Light Workspace (content area — App Shell body) ─────────────────────
     Distinct neutral family from Dark Premium surfaces above. Never mix:
     topbar/overlays stay Dark Premium, the Workspace content area stays
     Light Workspace. */
  --ws-bg:              #F7F8FC;
  --ws-surface:         #FFFFFF;
  --ws-surface-hover:   #F1F3F9;
  --ws-border-subtle:   rgba(0, 0, 0, 0.06);
  --ws-border-soft:     rgba(0, 0, 0, 0.10);
  --ws-border-medium:   rgba(0, 0, 0, 0.15);

  --ws-text-primary:   #0F172A;
  --ws-text-secondary: #475569;
  --ws-text-muted:     #94A3B8;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-display: 'Oswald', sans-serif;
  --font-body:    'Inter', sans-serif;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;

  /* ── Spacing (8pt grid) ───────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Border Radius ────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.40);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.60);
  --shadow-brand: 0 0 20px rgba(0, 0, 227, 0.18), 0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.20);

  /* ── Glows ────────────────────────────────────────────────────────────── */
  --glow-brand:   0 0 24px rgba(0, 0, 227, 0.25);
  --glow-purple:  0 0 24px rgba(189, 62, 230, 0.20);
  --glow-input:   0 0 0 3px rgba(0, 0, 227, 0.15);

  /* ── Motion (Emil Kowalski principles) ────────────────────────────────── */
  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-normal:  240ms;
  --dur-slow:    400ms;
  --dur-xslow:   600ms;

  /* ── Z-Index Scale ────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-topbar:  100;
  --z-overlay: 200;
  --z-toast:   300;
  --z-sim:     99999;
}

/* ── Promo pulse animation ────────────────────────────────────────────────── */
@keyframes s360-promo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 74, 0); }
  50%       { box-shadow: 0 0 8px 3px rgba(255, 107, 74, 0.18); }
}

.s360-promo-pulse {
  animation: s360-promo-pulse 4.5s ease-in-out infinite;
}

/* Stops animation when user interacts */
.s360-promo-pulse.paused,
.s360-selected .s360-promo-pulse {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .s360-promo-pulse { animation: none; }
}

/* ── Brand gradient text utility ──────────────────────────────────────────── */
.s360-gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Scrollbar brand ──────────────────────────────────────────────────────── */
:root {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 227, 0.25) transparent;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 227, 0.25);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 227, 0.45);
}