/* ================================================================
   FECOD DESIGN TOKENS — Fuente única de verdad
   Cargado PRIMERO en base.html (antes de fecod-design-system.css)
   ================================================================ */
:root {
  /* ─── PALETA DE COLORES ─────────────────────────────────────── */
  --color-bg:            #010729;
  --color-surface:       #001E46;
  --color-surface-alt:   #0B2E6B;
  --color-surface-hover: #0F3880;
  --color-primary:       #004B9C;
  --color-primary-hover: #0058b8;
  --color-accent:        #AFDFF9;
  --color-accent-muted:  rgba(175, 223, 249, 0.50);
  --color-danger:        #D30535;
  --color-danger-hover:  #b00428;
  --color-success:       #198754;
  --color-warning:       #ffc107;
  --color-text:          #ffffff;
  --color-text-muted:    rgba(175, 223, 249, 0.55);
  --color-border:        rgba(175, 223, 249, 0.12);
  --color-border-active: rgba(175, 223, 249, 0.35);

  /* ─── TIPOGRAFÍA ─────────────────────────────────────────────── */
  --font-display: "Bakbak One", "Oswald", sans-serif;
  --font-body:    "Space Mono", "Courier New", monospace;

  --font-size-xs:   0.65rem;   /* ~10px */
  --font-size-sm:   0.78rem;   /* ~12px */
  --font-size-base: 1rem;      /* 16px  */
  --font-size-lg:   1.125rem;  /* 18px  */
  --font-size-xl:   1.25rem;   /* 20px  */
  --font-size-2xl:  1.5rem;    /* 24px  */
  --font-size-3xl:  2rem;      /* 32px  */
  --font-size-4xl:  2.5rem;    /* 40px  */
  --font-size-5xl:  clamp(2.5rem, 6vw, 4rem);

  /* ─── ESPACIADO ──────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ─── BORDER RADIUS ──────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* Decisión de diseño: cards y botones son sharp (0), badges son pill */
  --radius-card:  0;
  --radius-btn:   0;
  --radius-badge: var(--radius-pill);
  --radius-input: var(--radius-sm);
  --radius-modal: var(--radius-md);

  /* ─── SOMBRAS ────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.30);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* Aliases con nombres usados en código existente */
  --shadow-card:  rgba(0, 0, 0, 0.25) 0px 10px 20px -12px;
  --shadow-hover: rgba(0, 0, 0, 0.35) 0px 14px 28px -16px;
  --shadow-inset: rgba(0, 0, 0, 0.22) 0px 1px 2px 0px inset;

  /* ─── TRANSICIONES ───────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 350ms ease;

  /* ─── LAYOUT ─────────────────────────────────────────────────── */
  --content-width:        1200px;
  --content-width-narrow: 960px;
  --page-pad:             clamp(1rem, 3vw, 2rem);
  --section-gap:          clamp(1.5rem, 4vw, 3rem);

  /* ─── RETROCOMPATIBILIDAD — alias --fecod-* ──────────────────── */
  --fecod-bg:            var(--color-bg);
  --fecod-surface:       var(--color-surface);
  --fecod-surface-2:     var(--color-surface-alt);
  --fecod-surface-alpha: rgba(0, 30, 70, 0.55);
  --fecod-primary:       var(--color-primary);
  --fecod-accent:        var(--color-accent);
  --fecod-red:           var(--color-danger);
  --fecod-danger:        var(--color-danger);
  --fecod-text:          var(--color-text);
  --fecod-text-soft:     rgba(175, 223, 249, 0.82);
  --fecod-text-muted:    var(--color-text-muted);
  --fecod-text-secondary: var(--color-accent);
  --fecod-border:        rgba(175, 223, 249, 0.18);
  --fecod-border-strong: rgba(175, 223, 249, 0.38);
  --fecod-border-interactive: rgba(175, 223, 249, 0.45);
  --fecod-overlay:       rgba(1, 7, 41, 0.72);
  --fecod-shadow:        var(--shadow-lg);
  --fecod-shadow-soft:   var(--shadow-md);
  --fecod-shadow-card:   var(--shadow-card);
  --fecod-shadow-hover:  var(--shadow-hover);
  --fecod-shadow-inset:  var(--shadow-inset);

  /* Radii fecod — decisión estética: 0 en cards/botones */
  --fecod-radius-sm:   0;
  --fecod-radius-md:   0;
  --fecod-radius-lg:   0;
  --fecod-radius-pill: var(--radius-pill);

  /* Fuentes (alias cortos y largos) */
  --fecod-font-d:       var(--font-display);
  --fecod-font-b:       var(--font-body);
  --fecod-font-display: var(--font-display);
  --fecod-font-body:    var(--font-body);

  /* Layout */
  --fecod-content-width:        var(--content-width);
  --fecod-content-width-narrow: var(--content-width-narrow);
  --fecod-max-width:            1152px;
  --fecod-page-pad:             var(--page-pad);
  --fecod-section-gap:          var(--section-gap);
  --fecod-transition-fast:      var(--transition-fast);
  --fecod-transition-base:      var(--transition-base);

  /* ─── RETROCOMPATIBILIDAD — alias --mx-* ─────────────────────── */
  --mx-bg:      var(--color-bg);
  --mx-surface: var(--color-surface);
  --mx-primary: var(--color-primary);
  --mx-accent:  var(--color-accent);
  --mx-red:     var(--color-danger);

  /* ─── RETROCOMPATIBILIDAD — alias --brand-* ──────────────────── */
  --brand-ink:        var(--color-bg);
  --brand-navy:       var(--color-surface);
  --brand-blue:       var(--color-primary);
  --brand-blue-soft:  var(--color-accent);
  --brand-accent-red: var(--color-danger);
  --brand-text:       var(--color-text);
  --brand-text-muted: var(--color-accent);
  --brand-border:     rgba(175, 223, 249, 0.18);
  --brand-surface:    linear-gradient(155deg, rgba(0, 30, 70, 0.92), rgba(1, 7, 41, 0.96));
}