/* ============================================================
   CRONORUN DESIGN SYSTEM – VARIABLES GLOBALES
   Sistema de tokens de diseño compartido entre todas las páginas
   ============================================================ */

:root {
  /* ── Paleta principal ──────────────────────────────────── */
  --cr-red:           #e63030;
  --cr-red-dark:      #b81f1f;
  --cr-red-light:     #ff4d4d;
  --cr-orange:        #ff6b35;
  --cr-orange-light:  #ff8c5a;

  /* ── Degradados ────────────────────────────────────────── */
  --cr-gradient-main: linear-gradient(135deg, var(--cr-red), var(--cr-orange));
  --cr-gradient-dark: linear-gradient(135deg, var(--cr-red-dark), #c44a00);
  --cr-gradient-glow: radial-gradient(ellipse at top, rgba(230,48,48,0.15) 0%, transparent 70%);

  /* ── Fondos ────────────────────────────────────────────── */
  --cr-bg:            #0a0a0a;
  --cr-dark:          #0d0d0d;
  --cr-dark-2:        #131313;
  --cr-dark-3:        #1a1a1a;
  --cr-dark-4:        #1f1f1f;
  --cr-card:          #161616;
  --cr-card-hover:    #1d1d1d;
  --cr-surface:       #222222;

  /* ── Bordes ────────────────────────────────────────────── */
  --cr-border:        rgba(230, 48, 48, 0.20);
  --cr-border-hover:  rgba(230, 48, 48, 0.50);
  --cr-border-subtle: rgba(255, 255, 255, 0.06);

  /* ── Texto ─────────────────────────────────────────────── */
  --cr-text:          #f0f0f0;
  --cr-text-2:        #cccccc;
  --cr-muted:         #888888;
  --cr-muted-light:   #aaaaaa;

  /* ── Tipografía ────────────────────────────────────────── */
  --font-display:     'Barlow Condensed', sans-serif;
  --font-body:        'Barlow', sans-serif;
  --font-mono:        'Orbitron', monospace;

  /* ── Espaciado ─────────────────────────────────────────── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;

  /* ── Radios ────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 50px;

  /* ── Sombras ───────────────────────────────────────────── */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-red:   0 4px 20px rgba(230, 48, 48, 0.35);
  --shadow-red-lg:0 8px 40px rgba(230, 48, 48, 0.50);
  --shadow-glow:  0 0 60px rgba(230, 48, 48, 0.25);

  /* ── Transiciones ──────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── Layout ────────────────────────────────────────────── */
  --max-width:     1200px;
  --navbar-height: 64px;
  --sidebar-width: 240px;

  /* ── Z-index ───────────────────────────────────────────── */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-navbar:     300;
  --z-modal:      400;
  --z-toast:      500;
}