/* =============================================
   VARIABLES GLOBALES — PERMODEV
   ============================================= */
:root {
  /* Paleta principal */
  --bg:         #0a0b0f;
  --bg2:        #0f1117;
  --bg3:        #161821;
  --surface:    #1c1e2a;
  --surface2:   #242638;
  --border:     rgba(255,255,255,0.07);
  --border-hl:  rgba(255,255,255,0.14);

  /* Acento único */
  --accent:     #c8f06e;
  --accent-dim: rgba(200,240,110,0.15);
  --accent-glow:rgba(200,240,110,0.35);

  /* Texto */
  --text:       #e8eaf0;
  --text-muted: #7a7d95;
  --text-dim:   #4a4d65;

  /* Estado */
  --error:      #ff5a6a;
  --error-dim:  rgba(255,90,106,0.15);
  --success:    #5af0a0;
  --success-dim:rgba(90,240,160,0.12);

  /* Tipografía */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Radios */
  --r:    10px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Sombras */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.5);
  --shadow-accent: 0 0 30px var(--accent-glow);

  /* Glassmorphism */
  --glass:        rgba(28,30,42,0.75);
  --glass-light:  rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.08);
  --glass-inner:  inset 0 1px 0 rgba(255,255,255,0.07);

  /* Transiciones */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-med:  300ms;
  --t-slow: 500ms;

  /* Layout */
  --nav-h: 64px;
  --sidebar-w: 220px;
}