/**
 * SentimIA Unified Design Tokens — single source of truth
 *
 * Replaces the previous split between `ui_tokens.css` (--ui-*) and
 * `design-tokens.css` (--color-*, --text-*, --space-*, --radius-*, --shadow-*).
 *
 * NEW CODE: prefer the semantic names (--color-*, --text-*, --space-*,
 * --radius-*, --shadow-*, --transition-*, --z-*).
 *
 * LEGACY: --ui-* names are kept as ALIASES that resolve to the canonical
 * tokens below, so existing stylesheets (modern-explorer.css, explorer-v3.css,
 * investigador.css, ui_components.css, ui_layout.css, etc.) keep working.
 * Do NOT introduce new --ui-* references; migrate when you touch a file.
 */

:root {
  /* ============================================================
     COLORS — Neutrals
     ============================================================ */
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E5E5E5;
  --color-gray-300: #D4D4D4;
  --color-gray-400: #A3A3A3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;

  /* ============================================================
     COLORS — Brand / Primary (purple scale, used in shadows, badges)
     ============================================================ */
  --color-primary-50:  #FAF5FF;
  --color-primary-100: #F3E8FF;
  --color-primary-200: #E9D5FF;
  --color-primary-300: #D8B4FE;
  --color-primary-400: #C084FC;
  --color-primary-500: #A855F7;
  --color-primary-600: #9333EA;
  --color-primary-700: #7C3AED;
  --color-primary-800: #6B21A8;
  --color-primary-900: #581C87;

  /* ============================================================
     COLORS — App accent (indigo, used by sidebar + buttons)
     ============================================================ */
  --color-accent-500: #6D4AFF;
  --color-accent-600: #5c3aef;
  --color-accent-soft: rgba(109, 74, 255, 0.14);
  --color-accent-border: rgba(109, 74, 255, 0.25);
  --aiva-purple: #6D4AFF;
  --aiva-gradient: linear-gradient(135deg, #6D4AFF 0%, #D84CFF 33%, #FF7A59 66%, #2FD3FF 100%);

  /* ============================================================
     COLORS — Sentiment (WCAG AA compliant)
     ============================================================ */
  --color-positive-50:  #ECFDF5;
  --color-positive-100: #D1FAE5;
  --color-positive-500: #10B981;
  --color-positive-600: #059669;
  --color-positive-700: #047857;
  --color-positive-text: #065F46;

  --color-negative-50:  #FEF2F2;
  --color-negative-100: #FEE2E2;
  --color-negative-500: #EF4444;
  --color-negative-600: #DC2626;
  --color-negative-700: #B91C1C;
  --color-negative-text: #991B1B;

  --color-neutral-50:  #F9FAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-text: #374151;

  --color-mixed-50:  #FFFBEB;
  --color-mixed-100: #FEF3C7;
  --color-mixed-500: #F59E0B;
  --color-mixed-600: #D97706;
  --color-mixed-700: #B45309;
  --color-mixed-text: #92400E;

  /* Domain accents */
  --color-emotion-bg: #EDE9FE;
  --color-emotion-text: #6D28D9;
  --color-emotion-border: #C4B5FD;

  --color-topic-bg: #DBEAFE;
  --color-topic-text: #1D4ED8;
  --color-topic-border: #93C5FD;

  --color-brand-bg: #FCE7F3;
  --color-brand-text: #BE185D;
  --color-brand-border: #F9A8D4;

  /* ============================================================
     SURFACES — semantic (light theme baseline)
     ============================================================ */
  --color-bg:        #f7f8fc;
  --color-surface:   #ffffff;
  --color-surface-2: #fbfcff;
  --color-border:    rgba(15, 23, 42, 0.10);

  --color-text:      #0f172a;
  --color-text-muted:    rgba(15, 23, 42, 0.62);
  --color-text-subtle:   rgba(15, 23, 42, 0.44);

  /* Sidebar (always dark) */
  --color-sidebar-bg:        #0A0A0A;
  --color-sidebar-bg-2:      #111111;
  --color-sidebar-text:      rgba(255, 255, 255, 0.86);
  --color-sidebar-muted:     rgba(255, 255, 255, 0.55);
  --color-sidebar-border:    rgba(255, 255, 255, 0.08);
  --color-sidebar-hover-bg:  rgba(255, 255, 255, 0.05);

  /* Severity scale (used for risk/alert pills) */
  --color-severity-critical: var(--color-negative-600);
  --color-severity-high:     var(--color-negative-500);
  --color-severity-medium:   var(--color-mixed-500);
  --color-severity-low:      var(--color-neutral-500);
  --color-severity-info:     var(--color-accent-500);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-family-sans: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --text-2xs:  0.625rem; /* 10px */
  --text-xs:   0.75rem;  /* 12px */
  --text-sm:   0.875rem; /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg:   1.125rem; /* 18px */
  --text-xl:   1.25rem;  /* 20px */
  --text-2xl:  1.5rem;   /* 24px */
  --text-3xl:  1.875rem; /* 30px */

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

  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

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

  /* ============================================================
     RADII
     ============================================================ */
  --radius-none: 0;
  --radius-sm:   0.25rem; /* 4px */
  --radius-md:   0.5rem;  /* 8px */
  --radius-lg:   0.75rem; /* 12px */
  --radius-xl:   1rem;    /* 16px */
  --radius-2xl:  1.25rem; /* 20px */
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS / ELEVATION
     ============================================================ */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  --shadow-focus:         0 0 0 3px rgba(109, 74, 255, 0.45);
  --shadow-focus-error:   0 0 0 3px rgba(239, 68, 68, 0.40);
  --shadow-focus-success: 0 0 0 3px rgba(16, 185, 129, 0.40);

  --shadow-card:          0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover:    0 10px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-card-selected: 0 0 0 2px var(--color-accent-500), 0 8px 24px rgba(109, 74, 255, 0.20);

  /* ============================================================
     MOTION
     ============================================================ */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);

  --animation-slow: 800ms;

  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */
  --z-base:           0;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-fixed:          300;
  --z-modal-backdrop: 400;
  --z-modal:          500;
  --z-popover:        600;
  --z-tooltip:        700;
  --z-toast:          800;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --layout-sidebar-w: 280px;
  --layout-content-max: 1120px;
  --layout-topbar-h: 56px;

  /* ============================================================
     ACCESSIBILITY
     ============================================================ */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;

  /* ============================================================
     LEGACY ALIASES — do NOT use in new code, kept for compat
     with css/ui_components.css, css/ui_layout.css, modern-explorer.css,
     explorer-v3.css, investigador.css, etc.
     ============================================================ */

  /* Typography aliases */
  --ui-font-sans: var(--font-family-sans);
  --ui-text-xs:   12px;
  --ui-text-sm:   13px;
  --ui-text-md:   14px;
  --ui-text-lg:   16px;
  --ui-text-xl:   20px;
  --ui-text-2xl:  24px;  /* era 26 — escala limpia, matchea título de página */
  --ui-text-3xl:  30px;  /* era 32 */
  --ui-lh-tight:   1.2;
  --ui-lh-normal:  1.4;
  --ui-lh-relaxed: 1.6;

  /* Spacing aliases */
  --ui-s-1: 4px;
  --ui-s-2: 8px;
  --ui-s-3: 12px;
  --ui-s-4: 16px;
  --ui-s-5: 24px;
  --ui-s-6: 32px;
  --ui-s-7: 40px;
  --ui-s-8: 56px;

  /* Radius aliases — alineados a la escala canónica y al informe (8/12/16) */
  --ui-r-sm: 8px;   /* era 10 */
  --ui-r-md: 12px;  /* era 14 */
  --ui-r-lg: 12px;  /* era 18 — cards menos redondeadas, como el informe (10-12) */
  --ui-r-xl: 16px;  /* era 22 */

  /* Shadow aliases */
  --ui-sh-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --ui-sh-md: 0 10px 30px rgba(15, 23, 42, 0.10);
  --ui-sh-lg: 0 18px 60px rgba(15, 23, 42, 0.14);

  /* Color aliases */
  --ui-bg:        var(--color-bg);
  --ui-surface:   var(--color-surface);
  --ui-surface-2: var(--color-surface-2);
  --ui-border:    var(--color-border);

  --ui-text:    var(--color-text);
  --ui-muted:   var(--color-text-muted);
  --ui-muted-2: var(--color-text-subtle);

  --ui-accent:       var(--color-accent-500);
  --ui-accent-hover: var(--color-accent-600);
  --ui-accent-2:     var(--color-positive-500);
  --ui-warn:         var(--color-mixed-500);
  --ui-danger:       var(--color-negative-500);

  --ui-focus: rgba(91, 92, 255, 0.35);

  --ui-sb-bg:            var(--color-sidebar-bg);
  --ui-sb-bg-2:          var(--color-sidebar-bg-2);
  --ui-sb-text:          var(--color-sidebar-text);
  --ui-sb-muted:         var(--color-sidebar-muted);
  --ui-sb-border:        var(--color-sidebar-border);
  --ui-sb-active-bg:     var(--color-accent-soft);
  --ui-sb-active-border: var(--color-accent-border);
  --ui-sb-hover-bg:      var(--color-sidebar-hover-bg);

  --ui-sidebar-w:  var(--layout-sidebar-w);
  --ui-content-max: var(--layout-content-max);
  --ui-topbar-h:   var(--layout-topbar-h);

  /* Misc legacy names referenced in inline styles (gray scale) */
  --gray-100: var(--color-gray-100);
  --gray-200: var(--color-gray-200);
  --bg-secondary: var(--color-surface-2);
  --border-light: var(--color-border);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --accent: var(--color-accent-500);
}

/* ================================================================
   Reduced motion — respect user preference globally
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   Dark mode tokens (future-ready, opt-in via .dark-mode on :root)
   ================================================================ */
@media (prefers-color-scheme: dark) {
  :root.dark-mode {
    --color-bg:        #0b1220;
    --color-surface:   #111827;
    --color-surface-2: #0f172a;
    --color-border:    rgba(255, 255, 255, 0.10);
    --color-text:      #f8fafc;
    --color-text-muted:  rgba(248, 250, 252, 0.70);
    --color-text-subtle: rgba(248, 250, 252, 0.50);
  }
}