/* ═══════════════════════════════════════════════════════════════════════════════
   OBSERVATORIO DE VIOLENCIA RD — UNIFIED THEME
   observatorio-theme.css
   Canonical design token system: single source of truth for all CSS variables.
   All component CSS files (design-system.css, intelligence-design.css,
   premium-dashboard.css, case-explorer.css) inherit from this file.

   Token naming: --color-* for all tokens (no --obs-*, --pd-*, --ce-* duplicates)
   Compatibility aliases: each component file maps its prefix to --color-*

   Philosophy:
   - Dark-first token architecture (dark values as primary)
   - Light mode via @media (prefers-color-scheme: light) override
   - Force dark with body.dark class
   - All values are CSS custom properties for runtime theming
   ═══════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {

  /* ═══════════════════════════════════════════════════════════════════
     1. BRAND COLORS
     ═══════════════════════════════════════════════════════════════════ */

  /* Primary brand */
  --color-navy:          #0b1e3f;
  --color-navy-deep:     #07142b;
  --color-navy-soft:     #122b54;
  --color-navy-hover:    #16376a;

  /* Accent / interactive */
  --color-accent:        #1e40af;
  --color-accent-hover:  #1d4ed8;
  --color-accent-soft:   #dbeafe;
  --color-accent-light:  #3b82f6;
  --color-accent-dim:    rgba(30, 64, 175, 0.15);

  /* Brand cian (intelligence platform) */
  --color-brand:         #00d4aa;
  --color-brand-dim:     rgba(0, 212, 170, 0.12);
  --color-brand-glow:    rgba(0, 212, 170, 0.3);
  --color-brand-hover:   #00e6b8;

  /* ═══════════════════════════════════════════════════════════════════
     2. SEMANTIC STATUS COLORS
     ═══════════════════════════════════════════════════════════════════ */

  --color-danger:        #b91c1c;
  --color-danger-soft:   #fef2f2;
  --color-danger-light:  #dc2626;
  --color-danger-dim:    rgba(220, 38, 38, 0.12);

  --color-warning:       #b45309;
  --color-warning-soft:   #fffbeb;
  --color-warning-light:  #d97706;
  --color-warning-dim:    rgba(217, 119, 6, 0.12);

  --color-success:       #15803d;
  --color-success-soft:  #f0fdf4;
  --color-success-light: #22c55e;
  --color-success-dim:   rgba(21, 128, 61, 0.12);

  --color-info:         #0e7490;
  --color-info-soft:    #ecfeff;
  --color-info-light:    #3b82f6;
  --color-info-dim:      rgba(14, 116, 144, 0.12);

  --color-purple:        #7c3aed;
  --color-purple-soft:   #f5f3ff;
  --color-purple-light:  #a855f7;
  --color-purple-dim:    rgba(168, 85, 247, 0.12);

  --color-gold:          #92400e;
  --color-gold-soft:     #fffbeb;
  --color-gold-light:    #d97706;
  --color-gold-dim:      rgba(180, 83, 9, 0.12);

  /* ═══════════════════════════════════════════════════════════════════
     3. SURFACE / BACKGROUND (dark values = default)
     ═══════════════════════════════════════════════════════════════════ */

  --color-bg:            #f4f6fa;   /* Light default */
  --color-bg-subtle:     #f8fafc;
  --color-bg-deep:       #eef1f7;
  --color-surface:       #ffffff;
  --color-surface-dark:  #0f1d3a;
  --color-overlay:       rgba(11, 30, 63, 0.55);

  /* Intelligence platform surfaces (dark) */
  --color-bg-panel:      #0d1420;
  --color-bg-raised:     #111927;
  --color-bg-hover:      #172035;
  --color-bg-input:      #0a1220;

  /* ═══════════════════════════════════════════════════════════════════
     4. TEXT COLORS
     ═══════════════════════════════════════════════════════════════════ */

  --color-text:          #0f172a;
  --color-text-muted:    #64748b;
  --color-text-soft:     #94a3b8;
  --color-text-inverse:  #ffffff;
  --color-text-on-dark:  #e2e8f0;

  /* ═══════════════════════════════════════════════════════════════════
     5. BORDER / DIVIDER COLORS
     ═══════════════════════════════════════════════════════════════════ */

  --color-border:        #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-dark:   #1e3a5f;

  /* Intelligence platform borders (dark) */
  --color-border-subtle: #141e2e;
  --color-border-bright: #243044;
  --color-border-input:  #1e293b;

  /* ═══════════════════════════════════════════════════════════════════
     6. SHADOW SYSTEM
     ═══════════════════════════════════════════════════════════════════ */

  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:    0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:    0 12px 28px rgba(15, 23, 42, 0.09), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-card:  0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-xl:    0 24px 48px rgba(11, 30, 63, 0.18);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.05);

  /* Dark mode specific shadows */
  --shadow-dark-xs:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-dark-sm:   0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-dark-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-dark-lg:   0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-dark-card: 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-dark-xl:   0 24px 48px rgba(0, 0, 0, 0.5);

  /* Glow effects */
  --glow-brand:   0 0 12px rgba(0, 212, 170, 0.25);
  --glow-danger:  0 0 12px rgba(255, 71, 87, 0.25);
  --glow-accent:  0 0 0 3px rgba(59, 130, 246, 0.15);
  --glow-danger-glow: 0 0 0 3px rgba(220, 38, 38, 0.15);

  /* ═══════════════════════════════════════════════════════════════════
     7. RADIUS SYSTEM
     ═══════════════════════════════════════════════════════════════════ */

  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-pill:  999px;

  /* Bloomberg terminal style */
  --radius-panel: 2px;
  --radius-panel-sm: 1px;

  /* ═══════════════════════════════════════════════════════════════════
     8. TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════════ */

  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-ui:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:    0.72rem;
  --text-sm:    0.84rem;
  --text-base:  0.95rem;
  --text-md:    1.05rem;
  --text-lg:    1.18rem;
  --text-xl:    1.35rem;
  --text-2xl:   1.7rem;
  --text-3xl:   2.1rem;
  --text-4xl:   2.6rem;
  --text-5xl:   3.2rem;

  --leading-tight:  1.2;
  --leading-normal:  1.5;
  --leading-loose:   1.7;

  /* ═══════════════════════════════════════════════════════════════════
     9. SPACING SCALE
     ═══════════════════════════════════════════════════════════════════ */

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   2rem;
  --space-8:   2.5rem;
  --space-9:   3rem;
  --space-10:  4rem;

  /* ═══════════════════════════════════════════════════════════════════
     10. LAYOUT CONSTANTS
     ═══════════════════════════════════════════════════════════════════ */

  --container-max:  1320px;
  --header-h:       64px;
  --nav-h:          50px;
  --header-h-sm:    56px;
  --nav-h-sm:       46px;
  --panel-header-h: 36px;

  /* ═══════════════════════════════════════════════════════════════════
     11. TRANSITIONS
     ═══════════════════════════════════════════════════════════════════ */

  --t-fast:  0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:  0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:  0.35s cubic-bezier(0.4, 0, 0.2, 1);

}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — @media query (follows OS preference)
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces — dark override */
    --color-bg:           #060d18;
    --color-bg-subtle:    #0b1525;
    --color-bg-deep:      #040b14;
    --color-surface:      #0d1a2d;
    --color-surface-dark: #0b1525;
    --color-bg-panel:     #0d1420;
    --color-bg-raised:    #111927;
    --color-bg-hover:     #172035;
    --color-bg-input:     #0a1220;

    /* Text — dark override */
    --color-text:         #f1f5f9;
    --color-text-muted:   #64748b;
    --color-text-soft:    #94a3b8;
    --color-text-inverse: #0f172a;
    --color-text-on-dark: #e2e8f0;

    /* Borders — dark override */
    --color-border:        #1e293b;
    --color-border-strong: #334155;
    --color-border-dark:   #1e3a5f;
    --color-border-subtle: #141e2e;
    --color-border-bright: #243044;

    /* Semantic soft colors — dark override */
    --color-accent-soft:  rgba(30, 64, 175, 0.2);
    --color-danger-soft:  rgba(185, 28, 28, 0.2);
    --color-warning-soft: rgba(180, 83, 9, 0.2);
    --color-success-soft: rgba(21, 128, 61, 0.2);
    --color-info-soft:    rgba(14, 116, 144, 0.2);

    /* Shadows — dark override */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 12px 28px rgba(0, 0, 0, 0.45);
    --shadow-card:  0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-xl:    0 24px 48px rgba(0, 0, 0, 0.5);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FORCE DARK MODE — body.dark class
   Pages that want to always be dark (no OS preference) add body.dark
   ═══════════════════════════════════════════════════════════════════ */

body.dark {
  /* Surfaces */
  --color-bg:           #060d18;
  --color-bg-subtle:    #0b1525;
  --color-bg-deep:      #040b14;
  --color-surface:      #0d1a2d;
  --color-surface-dark: #0b1525;
  --color-bg-panel:     #0d1420;
  --color-bg-raised:    #111927;
  --color-bg-hover:     #172035;
  --color-bg-input:     #0a1220;

  /* Text */
  --color-text:         #f1f5f9;
  --color-text-muted:   #64748b;
  --color-text-soft:    #94a3b8;
  --color-text-inverse: #0f172a;
  --color-text-on-dark: #e2e8f0;

  /* Borders */
  --color-border:        #1e293b;
  --color-border-strong: #334155;
  --color-border-dark:   #1e3a5f;
  --color-border-subtle: #141e2e;
  --color-border-bright: #243044;

  /* Semantic soft */
  --color-accent-soft:  rgba(30, 64, 175, 0.25);
  --color-danger-soft:  rgba(185, 28, 28, 0.25);
  --color-warning-soft: rgba(180, 83, 9, 0.25);
  --color-success-soft: rgba(21, 128, 61, 0.25);
  --color-info-soft:    rgba(14, 116, 144, 0.25);

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-card:  0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-xl:    0 24px 48px rgba(0, 0, 0, 0.5);

  background: var(--color-bg);
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════════════════
   FORCE LIGHT MODE — body.light class
   Pages that must stay light add this override
   ═══════════════════════════════════════════════════════════════════ */

body.light {
  --color-bg:           #f4f6fa;
  --color-bg-subtle:    #f8fafc;
  --color-bg-deep:      #eef1f7;
  --color-surface:      #ffffff;
  --color-surface-dark: #0f1d3a;
  --color-bg-panel:     #ffffff;
  --color-bg-raised:    #f8fafc;
  --color-bg-hover:     #f1f5f9;
  --color-bg-input:     #f8fafc;
  --color-text:         #0f172a;
  --color-text-muted:   #64748b;
  --color-text-soft:    #94a3b8;
  --color-text-inverse: #ffffff;
  --color-text-on-dark: #e2e8f0;
  --color-border:        #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-dark:   #1e3a5f;
  --color-border-subtle: #f1f5f9;
  --color-border-bright: #cbd5e1;
  --color-accent-soft:  #dbeafe;
  --color-danger-soft:  #fef2f2;
  --color-warning-soft: #fffbeb;
  --color-success-soft: #f0fdf4;
  --color-info-soft:    #ecfeff;
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:    0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:    0 12px 28px rgba(15, 23, 42, 0.09), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-card:  0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-xl:    0 24px 48px rgba(11, 30, 63, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════
   BASE RESETS
   ═══════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ═══════════════════════════════════════════════════════════════════
   ANIMATIONS / KEYFRAMES
   ═══════════════════════════════════════════════════════════════════ */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes obsSpin { to { transform: rotate(360deg); } }
@keyframes obsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes skeleton-pulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-dot { 0%,100% {opacity:1} 50% {opacity:0.5} }

/* ═══════════════════════════════════════════════════════════════════
   LEGACY TOKEN ALIASES
   Maps old --obs-*, --pd-*, --ce-* prefixes to canonical --color-*
   These allow existing component CSS files to work unchanged.
   ═══════════════════════════════════════════════════════════════════ */

/* Intelligence Design (--obs-* → --color-*) */
:root {
  /* Brand */
  --obs-brand:        var(--color-brand);
  --obs-brand-dim:    var(--color-brand-dim);
  --obs-brand-glow:   var(--color-brand-glow);
  /* Semantic */
  --obs-danger:       var(--color-danger-light);
  --obs-danger-dim:   var(--color-danger-dim);
  --obs-danger-soft:  rgba(255, 71, 87, 0.06);
  --obs-warning:      var(--color-warning-light);
  --obs-warning-dim:  var(--color-warning-dim);
  --obs-warning-soft: rgba(255, 165, 2, 0.06);
  --obs-success:      var(--color-success-light);
  --obs-success-dim:  var(--color-success-dim);
  --obs-info:         var(--color-info-light);
  --obs-info-dim:     var(--color-info-dim);
  --obs-purple:       var(--color-purple-light);
  --obs-purple-dim:   var(--color-purple-dim);
  /* Surfaces */
  --obs-bg:           var(--color-bg);
  --obs-bg-panel:     var(--color-bg-panel);
  --obs-bg-raised:    var(--color-bg-raised);
  --obs-bg-hover:     var(--color-bg-hover);
  --obs-bg-input:     var(--color-bg-input);
  /* Borders */
  --obs-border:       var(--color-border);
  --obs-border-subtle: var(--color-border-subtle);
  --obs-border-bright: var(--color-border-bright);
  /* Text */
  --obs-text:         var(--color-text);
  --obs-text-soft:    var(--color-text-soft);
  --obs-text-muted:   var(--color-text-muted);
  --obs-text-inverse: var(--color-text-inverse);
  /* Accent line */
  --obs-accent-line:  rgba(0, 212, 170, 0.4);
  /* Font sizes */
  --font-size-2xs:    0.6rem;
  --font-size-xs:     0.7rem;
  --font-size-sm:     0.8rem;
  --font-size-base:   0.875rem;
  --font-size-md:     1rem;
  --font-size-lg:     1.125rem;
  --font-size-xl:     1.35rem;
  /* Layout */
  --panel-radius:     var(--radius-panel);
  --panel-radius-sm:  var(--radius-panel-sm);
  --glow-brand:       var(--glow-brand);
  --glow-danger:      var(--glow-danger);
}

/* Premium Dashboard (--pd-* → --color-*) */
:root {
  /* Brand */
  --pd-navy:          var(--color-navy);
  --pd-navy-light:    var(--color-navy-soft);
  --pd-blue:          var(--color-accent);
  --pd-blue-light:    var(--color-accent-light);
  --pd-blue-50:       var(--color-accent-soft);
  /* Semantic */
  --pd-red:           var(--color-danger);
  --pd-red-soft:      var(--color-danger-light);
  --pd-red-50:        var(--color-danger-soft);
  --pd-gold:          var(--color-gold);
  --pd-gold-light:    var(--color-gold-light);
  --pd-gold-50:       var(--color-gold-soft);
  --pd-green:         var(--color-success);
  --pd-green-soft:    var(--color-success-light);
  --pd-green-50:      var(--color-success-soft);
  --pd-purple:        var(--color-purple);
  --pd-purple-soft:   var(--color-purple-light);
  --pd-purple-50:     var(--color-purple-soft);
  /* Grays */
  --pd-gray-950:      #030712;
  --pd-gray-900:      #111827;
  --pd-gray-800:      #1f2937;
  --pd-gray-700:      #374151;
  --pd-gray-600:      #4b5563;
  --pd-gray-500:      #6b7280;
  --pd-gray-400:      #9ca3af;
  --pd-gray-300:      #d1d5db;
  --pd-gray-200:      #e5e7eb;
  --pd-gray-100:      #f3f4f6;
  --pd-gray-50:       #f9fafb;
  /* Surfaces */
  --pd-bg:            var(--color-bg);
  --pd-bg-card:       var(--color-surface);
  --pd-bg-subtle:     var(--color-bg-subtle);
  --pd-bg-raised:     var(--color-surface);
  --pd-bg-dark:       var(--color-navy);
  /* Text */
  --pd-text:          var(--color-text);
  --pd-text-soft:     var(--color-text-soft);
  --pd-text-muted:    var(--color-text-muted);
  --pd-text-inv:      var(--color-text-inverse);
  /* Borders */
  --pd-border:        var(--color-border);
  --pd-border-strong: var(--color-border-strong);
  /* Shadows */
  --pd-shadow-xs:     var(--shadow-xs);
  --pd-shadow-sm:     var(--shadow-sm);
  --pd-shadow:        var(--shadow-md);
  --pd-shadow-md:     var(--shadow-md);
  --pd-shadow-lg:     var(--shadow-lg);
  --pd-shadow-xl:     var(--shadow-xl);
  /* Radius */
  --pd-r-xs:          var(--radius-xs);
  --pd-r:            var(--radius-sm);
  --pd-r-md:         var(--radius-md);
  --pd-r-lg:         var(--radius-lg);
  --pd-r-xl:         var(--radius-xl);
  --pd-r-full:       var(--radius-pill);
  /* Fonts */
  --pd-font:          var(--font-ui);
  --pd-font-mono:     var(--font-mono);
  --pd-text-xs:       var(--text-xs);
  --pd-text-sm:       var(--text-sm);
  --pd-text-base:     var(--text-base);
}

/* Case Explorer (--ce-* → --color-*) */
:root {
  /* Brand */
  --ce-primary:       var(--color-navy);
  --ce-accent:        var(--color-accent);
  --ce-accent-light:  var(--color-accent-light);
  --ce-accent-dim:    var(--color-accent-dim);
  /* Semantic */
  --ce-danger:        var(--color-danger-light);
  --ce-danger-light:  var(--color-danger-dim);
  --ce-success:       var(--color-success);
  --ce-success-light: var(--color-success-dim);
  --ce-warning:       var(--color-warning-light);
  --ce-warning-light: var(--color-warning-dim);
  /* Surfaces */
  --ce-bg:            var(--color-bg);
  --ce-bg-card:       var(--color-surface);
  /* Text */
  --ce-text:          var(--color-text);
  --ce-text-soft:     var(--color-text-soft);
  --ce-text-muted:    var(--color-text-muted);
  /* Borders */
  --ce-border:        var(--color-border);
  /* Shadows */
  --ce-shadow:        var(--shadow-sm);
  --ce-shadow-md:     var(--shadow-md);
  --ce-shadow-lg:     var(--shadow-lg);
  /* Radius */
  --ce-radius:        var(--radius-md);
  --ce-radius-sm:     var(--radius-sm);
}