/* =========================================================
   SIN FILTRO — Design Tokens
   Dirección: "Comando Oliva" — dossier militar/de investigación
   con tipografía de máquina de escribir, sellos, recortes y camo.
   ========================================================= */

:root {
  /* ---- Color: base ---- */
  --color-bg:            #12140d;
  --color-surface:       #1a1d12;
  --color-surface-2:     #222616;
  --color-surface-3:     #2a2f1a;
  --color-border:        #2c3019;
  --color-border-strong: #3c4324;

  /* ---- Color: texto ---- */
  --color-text:          #ece7d5;
  --color-text-muted:    #9a9682;
  --color-text-faint:    #6c6957;

  /* ---- Color: acentos ---- */
  --color-accent:        #ff2d78; /* magenta — urgencia, sellos, CTA */
  --color-accent-ink:    #d61f61; /* variante "tinta seca" para sellos */
  --color-accent-2:      #8bb35a; /* verde radar — técnico, metadatos */
  --color-accent-2-dim:  #5f7a3d;

  /* ---- Color: camuflaje (solo decorativo, nunca detrás de texto de cuerpo) ---- */
  --camo-1: #171a10;
  --camo-2: #232819;
  --camo-3: #3a3f24;
  --camo-4: #55592f;
  --camo-5: #6e6338;

  /* ---- Estado ---- */
  --color-success: var(--color-accent-2);
  --color-danger:  var(--color-accent);
  --color-focus:   #ffd23f;

  /* ---- Tipografía ---- */
  --font-mono: 'IBM Plex Mono', 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --font-display: var(--font-mono);

  --fs-hero:    clamp(2rem, 1.5rem + 2vw, 3.4rem);
  --fs-h1:      clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --fs-h2:      clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem);
  --fs-h3:      1.3rem;
  --fs-lead:    1.05rem;
  --fs-body:    0.95rem;
  --fs-small:   0.82rem;
  --fs-micro:   0.7rem;

  --lh-tight: 1.25;
  --lh-normal: 1.55;
  --lh-loose: 1.75;

  --ls-label: 0.12em;

  /* ---- Espaciado ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;

  /* ---- Radios (mínimos: estética de expediente, no de app consumer) ---- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-full: 999px;

  /* ---- Bordes ---- */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* ---- Sombra / tinta ---- */
  --shadow-stamp: 0 0 0 1px rgba(0,0,0,.2);
  --shadow-card: 0 8px 24px rgba(0,0,0,.35);
  --shadow-focus: 0 0 0 3px rgba(255,210,63,.45);

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-padding: clamp(16px, 4vw, 40px);
  --grid-gap: var(--space-5);

  /* ---- Movimiento ---- */
  --duration-fast: 120ms;
  --duration-medium: 220ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Idiomas RTL (árabe): invierte flujo sin duplicar CSS */
html[dir="rtl"] {
  direction: rtl;
}